state와 props
state와 props는 react component에서 데이터를 다루는 대표적인 두 가지 방법이다.
props는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터이고 해당 데이터는 직접적으로 수정할 수 없는 값이다.
state는 컴포넌트 내부에서 가지고 있는 값으로써 변경할 수 있는 값이다.
react에서는 UI의 데이터는 반드시 props와 state로 관리되어야 한다.리액트 라이프 사이클이 props와 state변경 기준으로 화면을 갱신하기 때문이다.
setState
setState란 React의 불변성을 지키며 state의 값을 변경하기 위한 리액트 함수이다. 리액트에서는 모든 상태값들을 불변성을 유지하며 관리하는데, 이렇게 불변성을 유지하는 이유는 virtual-dom이 real-dom과의 차이를 알아내기 위함이다.
만약 객체가 직접적으로 값이 변경되게 된다면 변경된 객체를 찾기 위해 실제 돔과 가상 돔 전체 트리를 비교하며 변경사항을 감지해야 한다. 하지만 불변 객체를 사용하면 변화를 감지하는 것이 쉬워진다.
또한 상태값을 불변객체로 유지하는데 가장 큰 장점은 React에서 리렌더링 시기를 결정하는데 도움을 준다는 것이다. 객체가 변경되었는지 쉽게 판단할 수 있기에 이를 바탕으로 컴포넌트가 다시 렌더링할지를 결정할 수 있게 된다.
setState는 이러한 리액트의 특성을 반영한 메서드로, setState메서드가 호출되면 상탯값을 변경하고 해당 컴포넌트를 다시 렌더링하게 된다.
불변성
리액트에서 불변성이라는 단어는 핵심 키워드!
컴포넌트의 상태가 업데이트될 때 리액트 컴포넌트가 리렌더링되는데 만약 불변성을 유지하지 않고 값을 바꿔버리면 바뀐 값을 감지하지 못해 리렌더링이 필요한 시점에 이루어지지 않을 수 있다. 보통 전개연산자(spread operator)로 객체나 배열의 내부 값을 shallow copy해서 사용하고 있다.
