React | props와 state

🍣 props

- Component 속성을 설정할 때 사용하는 요소
- 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용가능

1️⃣ 컴포넌트를 사용할 때 pros 값 지정하기

부모 컴포넌트인 App 컴포넌트에서 MyComponent의 props 값을 지정, MyComponenet에서 props 사용

2️⃣ 비구조화 할당 문법을 통해 props 내부 값 추출하기

객체에서 값을 추출하는 문법 === 비구조화 할당(destructuring assignment) === 구조 분해 문법
함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용할 수 있다.

# 객체에서 값을 추출하는 비구조화 할당
const MyComponent = (props) => {
  const { name, title } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name} 이고, 이것은 {title}입니다.
      <br />
    </div>
  );
};

# 객체인 함수 파라미터 비구조화 할당
const MyComponent = ({ name, title }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name} 이고, 이것은 {title}입니다.
      <br />
    </div>
  );
};

3️⃣ propTypes를 통한 props 검증

백엔드와 데이터를 전달 받을 때 type을 지정해줘야하는 경우가 있는데 propTypes를 사용하여 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 수 있다.

타입을 지정하기 위해서는 우선 import 구문을 사용하여 'prop-types' 를 불러와야 한다.
그리고 위와 같이 type을 지정한 다음 App.js 에서 string으로 지정된 props의 값으로 number를 전달하면 Console에 에러메시지가 출력되는 것을 확인할 수 있다.

4️⃣ 클래스형 컴포넌트에서 props 사용하기

# MyComponent.js
class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (
      .
      .

클래스형 컴포넌트 내부에서 defaultProps와 proTypes 설정

class MyComponent extends Component {
  static defaultProps = {
    name: '기본 이름'
  };
  static propTypes = {
    name: Protypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
render() {
  const { name, favoriteNumber, children } = this.props;
  return(...);
  }
}

🍖 state

state는 컴포넌트 내부에서 바뀔 수 있는 값
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.

리액트의 state 2가지

1. state에는 클래스형 컴포넌트가 지니고 있는 state.
2. 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state.

# Counter.js
class Count extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // state 초기값 설정
      number: 0,
    };
  }
  render() {
    const { number } = this.state; // this.state를 사용하여 state 조회
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

컴포넌트에서 state를 설정할 때는 constructor 메서드를 작성하여 설정한다.

클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해줘야 한다.
컴포넌트의 state는 객체 형식이어야 한다.

constructor 메서드는 rendering 될 때 초기화를 담당.

이벤트로 설정할 함수를 넣어 줄때는 화살표 함수 문법을 사용하여야 한다.
함수 내부에서는 this.setState 함수를 사용하여 state 값을 바꿀 수 있다.

constructor 메서드를 사용하지 않고 state 초깃값 설정

# Counter.js
class Counter extends Component {
  state = {
    number: 0,
    fixedNumber: 0
  };
render()...

🥯 state를 사용할 때 주의 사항

⭐️ 배열이나 객체를 업데이트 해야할 때
=> 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState 혹은 Setter 함수를 통해 업데이트 한다.

# i.e
//객체 다루기
const array = [
  { id: 1, value: true},
  { id: 2, value: true},
  { id: 3, value: false},
];
let nextArray = array.concat({id:4});    // 새항목 추가
nextArray.filter(item => item.id !== 2);    // id가 2인 항목 제거
nextArray.map(item => item.id === 1 ? {...item, value: false} : item)); 
// id가 1인 항목의 value를 false로 설정

✨✨✨✨✨
객체에 대한 사본을 만들때는 spread 연산자 ....
배열에 대한 사본을 만들때는 배열의 내장함수 사용
✨✨✨✨✨

props, state 활용예제

1. 부모 컴포넌트인 App 에서 this.state 로 content라는 이름의 객체 데이터를 생성
2. 자식 컴포넌트인 TOC 에 this.state.content로 객체 데이터 전달
3. TOC 컴포넌트에서 받은 객체데이터를 while 반목문을 사용하여 list에 DOM을 생성하여 전달