[react] state의 3가지 정의, 리액트 콘텍스트의 2가지 단점

[내가 보기 위해 정리하는 강의자료]

 

리덕스란 무엇일까? A state management system for cross-component or app-wide state.

 

스테이트에는 3가지 정의가 있다. local State, Cross-Component State, App-Wide State.

local State : 하나의 컴포넌트가 바뀌는데에 영향을 미치는 데이터이다. 이것은 하나의 컴포넌트에 종속되어 있다. 우리는 이런 state를 useState와 useReducer를 통해서 조작할 수 있다. 

Cross-Component State : 이것은 여러가지 컴포넌트에 영향을 미치는 state이다. 이것을 사용하기 위해서는 prop chains혹은 prop drilling을 활용해서 데이터를 부모 자식간에 넘겨주어야 한다. 

App-Wide State : 모든 컴포넌트에 영향을 미치는 데이터이다. 예를 들어서 로그인 기능도 생각해볼 수 있다. 이것 또한 prop chains혹은 prop drilling을 활용해서 데이터를 사용한다. 이 방식을 리액트 콘텍스트와 리덕스에서 사용하고 있다. 

 

리액트 콘텍스트가 있는데 왜 굳이 리덕스를 이용하는가? 

리액트 콘텍스트는 두가지 치명적인 단점이 있다.

1) Complex Setup / Management. 앱의 규모가 작다면 상관없지만, 크면 클수록 복잡해진다.

2)Performance. 데이터가 자주 바뀌는 경우에는 적절한 퍼포먼스를 발휘하지 못한다.