[인스타그램 클론코딩] AuthContext

Context를 사용하기 전에는 부모의 상태를 자식의 자식 컴포넌트에게 전달하기 위해서는 자식 컴포넌트에게 상태를 전달하고, 다시 자식 컴포넌트가 자식의 자식 컴포넌트에게 상태를 전달하는 방식을 사용했습니다.

하지만 Context를 사용하면 아무리 깊은 자식 컴포넌트라도 부모 컴포넌트의 상태에 바로 접근할 수 있습니다. 

참조1: https://ko.reactjs.org/docs/hooks-reference.html#usecontext

참조2: https://ko.reactjs.org/docs/context.html

자세히 설명하려 했으나 이미 인스타그램 클론코딩 강의에 있는 내용이라 핵심 포인트만 집어 보겠습니다.

리액트 공식문서는 클래스 컴포넌트로 설명되어 있지만, 함수형 컴포넌트도 동일한 구조입니다.

리액트 공식문서보다 useContext를 부모 컴포넌트 내부에서 사용하고, 실제 사용될 Context만 반환하는 노마드 코더님이 사용한 방식히 훨씬 편리해 보이네요.

AuthContext.js

1. 모든 리액트 컴포넌트는 children 매개변수로 자식 컴포넌트를 받을 수 있다.
2. AuthContext 내부의 컴포넌트가 AuthContext의 isLoggedIn을 읽기 위해서는 useIsLoggedIn을 사용한다.
3. AuthContext 내부의 컴포넌트가 AuthContext의 isLoggedIn을 변경하기 위해서 useSetIsLoggedIn을 사용한다.
4. isLoggedIn은 Hook이기 때문에, 3에 의해 변경되면 AuthContext부터 리랜더링된다.

참조 : [인스타그램 클론코딩] 웹 로그인 구조