상태(state)란 무엇인가?
React에서 상태관리를 어떻게 하느냐에 대한 답을 하기 전 state즉 상태란 react에서 무엇인가? 에 대한 얘기부터 해봐야 할 것 같다. 상태의 정의는 웹 어플리케이션을 render하는데 있어 영향을 미칠 수있는 값 이라고 말한다. react에서 페이지가 리랜더링 되는 가장 큰 예시 두가지는 props와 state라고 익히 들어 알고 있을 거라고 생각한다. 상태가 렌더링에 영향을 주기 위한 값으로 존재하기 위해서는 한 가지 요소가 필요하다. 바로 동적인 값, 즉 변하는 값이라는 조건이다. 그게 다시 말해서 State값이다!
React에서 상태관리를 하는 이유
그렇다면 React에서 이러한 상태를 관리해야 하는 이유는 뭘까? 위에서 말했다 시피 react는 컴포넌트가 변화 할 때 리랜더링 되는데 가상dom에서 변경된 부분만 캐치해서 실제 dom에 반영시켜준다. 이러한 리랜더링을 통해서 우리가 원하는 값을 변경시켜 보여줄 수 있다. 이 말을 보면 react자체가 상태관리를 해준다는거 아니야? 라고 볼 수 있는데 어느 부분에는 맞다. useState Hook만 봐도 state를 만들고 setState함수로 그 state를 관리해준다. 하지만 만약에 여러 컴포넌트가 한개의 상태에 접근하고 싶다면 어떻게 해야하지? 하는 질문에서 상태관리 라이브러리가 등장하기 시작했다.
props
리액트는 대표적으로 단방향 데이터흐름 이라는 특징이 있다. 이는 data를 전달 할 때 부모 컴포넌트에서 자식 컴포넌트로만 데이터 전달이 가능하다는 점이다. 자식 컴포넌트 끼리 데이터 전달을 하고 싶다면 그들의 부모 컴포넌트에서 props를 다시 사용하여 연결해줘야한다. 하지만 여러개의 컴포넌트를 타고 내려가다 보면 props의 지옥이 펼쳐지고 이 props가 도대체 어디서부터 시작된건지 타고 올라가는 것이 쉽지 않아진다. (Props drilling) 이 때문에 유지 보수 또한 어려워지게 된다. 이 때문에 등장 한 것이 Redux라는 상태 관리 툴이다.
