Props와 State

📌 리액트 공식문서와 리액트를 다루는 기술을 참고하여 작성한 글입니다.

Props란?

컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터 이다.

• props는 읽기 전용이다. → 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

순수함수 → 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문

function sum(a, b) {
  return a + b;
}

순수함수 ❌ → 자신의 입력값을 변경하기 때문

function withdraw(account, amount) {
  account.total -= amount;
}

• props 기본 값 설정: defaultProps
• 태그 사이의 내용을 보여줌: children
• props 타입 검증: propTypes

State란?

state는 props와 유사하지만 컴포넌트 내부에서 바뀔수 있는 값을 의미합니다.

State를 사용할때 주의할점

• 직접 State를 수정하지 않기

// Wrong
this.state.comment = 'React';

// Correct
this.setState({comment: 'React'});

• State 업데이트는 비동기

// Wrong
this.setState({
  count: this.state.count + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.count + props.increment
}));

• 객체나 배열 업데이트 시

배열이나 객체의 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState를 통해 업데이트 한다.

객체에 대해 사본을 만들때는 spread 연산자라 불리는 ...을 사용하고, 배열에 대한 사본을 만들때는 배열의 내장함수들을 활용한다.

그러면 state와 props의 차이점은 무엇인가?

props 와 state는 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다. 또한 props는 읽기전용이며, state는 변경할 수 있습니다.