Context API

리액트에서 상태값을 부모에서 자식에게로 전달할때 그 depth가 깊어질 수록 값 전달이 까다로워진다. 귀찮아짐.

위의 경우는 좀 간단한 예시이지만, 살펴보면 다음과 같다. App이라는 최상위 컴포넌트에서 Greeting의 최 하위 컴포넌트에게 상태값을 전달하려면 App=>Profile=>Greeting의 이런식으로 중간 컴포넌트를 걸쳐야하고.. 더 깊어질경우 계속해서 props를 전달해줘야하는 귀찮음이 있다.

이렇게 contextAPI를 사용할 경우 App컴포넌트에 Provider의 value값으로 mike를 넣어주면 그 아래의 컴포넌트에서 다음과 같이 useContext()를 이용하여 그 값을 사용할 수 있다. 부모컴포넌트를 시작으로 1->2->3 으로 값을 전달하는 경우에 중간에 낀 2번에는 contextAPI를 호출하지않으면 중간 컴포넌트는 렌더없이 1->3번으로 전달할수있다.

하위 컴포넌트에서 상위 컴포넌트의 상태값을 변경하고싶을때는 위의 코드처럼 사용할 수 있다. 컴포넌트는 부모에서 자식순으로 다음과같다. App=>Profile=>Greeting(위 코드에서는 profile컴포넌트는 생략됨.)

SetUserContext에는 user값을 변경하는 setUser함수가 들어가있음.
UserContext에는 user의 객체가 들어가있음.
하위컴포넌트에서 onClick버튼 클릭시 상태변경함수값을 전달해주고, 값을 변경함.

실전 리액트 프로그래밍 개정판

인용.