React context

상태 관리
React context
React는 하나의 app 안에서 복수의 component들이 State를 공유할 때 발생하는 문제들을 해결하기 위해 context API를 제공한다.
context가 도입되기 전에는 Redux와 같은 별도의 상태 관리 라이브러리를 가져오는 것이 유일한 방법이었다.
그러나 많은 개발자들은 (특히 작은 app에서) Redux가 불필요한 복잡성을 유발한다고 느꼈다.

Context

Context
React에서 Props와 State는 부모 component와 자식 component 또는 한 component 안에서 데이터를 다루기 위해 사용된다.
이 Props와 State를 사용하게 되면 부모 component에서 자식 component, 즉, 위에서 아래, 한쪽으로 데이터가 흐르게 된다.
만약 다른 component에서 한쪽으로 흐르고 있는 데이터를 사용하고 싶은 경우 또는 다른 component에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶은 경우가 발생한다면 어떻게 해야 할까?
- React에서 데이터는 위에서 아래로 흐르게 되므로 사용하고 싶은 데이터와 이 데이터를 사용할 component의 공통 부모 component에 State를 만들고 사용하고자 하는 데이터를 Props를 전달하면 이 문제를 해결할 수 있다.
하지만 이처럼 component 사이에 공유되는 데이터를 위해 매번 공통 부모 component를 수정하고 하위 모든 component에 데이터를 Props로 전달하는 것은 매우 비효율적이다.
이와 같은 문제를 해결하기 위해 React에서는 Flux라는 개념을 도입하였고 그에 걸맞은 Context API를 제공하기 시작했다.