state 와 props

react 에서 props와 state는 데이터를 다루는 개념이다.
둘 다 javascript 객체이고 렌더링에 영향을 준다.
props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로 데이터 전달을 위해 사용하고 해당 데이터는 직접적으로 수정할 수 없는 값이다
state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미한다. 해당 값은 변경 할수 있다.

props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 라고 볼수 있다.

props

함수 컴포넌트나 클래스 컴포넌트 보두 컴포넌트의 자체 props를 수정해서는 안된다.
이런 함수들은 순수 함수 라 호칭한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 봔환하기 때문이다.

모든 react 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

state

state로 정의한 값이나 함수는 변경이 가능하다.
setState란 React의 불변성을 지키며 state의 값을 변경하기위한 리액트 함수 이다.
리액트에서는 모든 상태 값들을 불변성을 유지하며 관리하게되는데,이렇게 불변성을 유지 하는 것은 virtual-dom이 real dom과 차이를 알아내가 위한 이유가 있다.

불변성 메모리 영역에서 값이 변하지 않는다.

만약 객체가 직접적으로 값이 변경되게 된다면 변경된 객체를 찾기 위해 실제 돔과 가상 돔 전체 트리를 비교하며 변경사항을 감지해야한다. 하지만 불변 객체가 이전 객체와 다른지를 얕은 평가만으로 확인 할수 있기 때문이다.