[리액트] context

context

• 지금까지는 App의 state를 변경하고 사용하기 위해 props를 계속해서 자식의 자식.. 한테 넘겨주고,
• 자식은 App이 필요한 데이터를 부모로 올려주고 올려주고, 이 데이터는 다른 App의 자식이 사용하는 경우도 있었다.
• 이 방법이 잘못된 방법은 아니지만 번거럽고, 효율적이지 못하다. 
• 그래서 컴포넌트 전체에 사용할 수 있는, 리액트에 내장된 state저장소가 있다.
• 리액트 context이다. 이를 사용하면 액션을 트리거할 수 있다.
• 그런 다음 긴 prop체인을 만들지 않고 관련된 컴포넌트에 직접 전달할 수 있다.

 

로그인 여부 context 만들기

• 우선 관리할 state를 React.createContext를 통해 객체 형태로 만들어준다.
• 그리고 이제 나(context) 여깄어! 라고 알려주어야 한다.
• 그러기 위해서는 일단 지금 만든 AuthContext로 사용할 컴포넌트들을 감싸주어야 한다.

 

context provider

• context provider는 공급할 컴포넌트들을 감싸주는 역할을 한다.

• 위의 예시를 보면 <AuthContext.Provider로 감싸주고 value에 키(context에서 사용하는 키 값, value에 현재 state에 저장되어 있는 값을 넘겨 줄 수 있다.
• 즉, 키인 isLoggedIn은 context에서 사용하는 키값이고 value인 isLoggedIn은 내가 정할 value가 된다.
• 위의 경우 이미 isLoggedIn이라는 state를 app에서 사용하고 있기 때문에 그 값을 전해준거다.

 

context consumer

• 이제 context를 공급을 했으니 사용도 할줄 알아야한다.

• 이 또한 사용하려는 컴포넌트를 <AuthContext.Consumer>로 감싸주고 return 값으로 jsx코드를 반환한다.
• 이 때 사용하려는 state는 위의 ctx를 통해 접근할 수 있다.
• 하지만 이것은 사용하는 방법 중 하나이고 더 괜찮은 방법이 존재한다.

 

useContext 훅 사용

• useContext훅을 사용하므로 더 간결하고 보기 쉽게 사용할 수 있다.

• 위와 같이 useContext 훅을 import하고
• const ctx = useContext(AuthContext) 와 같이 지정을 해주어 사용하면 더 간결하고 보기 좋다.

 

문제점

• context에 모든 것을 의지하면 안된다. 때로는 props를 사용하는 것이 알맞을 때도 있다.
• 또한, 리액트의 context는 state가 자주 바뀔 때 사용하면 좋지 않다. 
• 이를 위한 더 나은 방법으로는 리덕스가 있다. 후에 배울 것.