[리액트 기초]context 사용법

유데미 강좌를 보고 공부한 내용을 정리해보았습니다.

여기서는 context를 사용하는 이유와 간단한 사용법을 정리하였습니다.

리렌더링과 관련된 최적화와 Redux의 차이는 따로 정리

💡

컨텍스트를 사용하는 이유

컴포넌트 간 데이터를 전달하려면 props를 이용한다.

리액트는 단방향 데이터 흐름을 갖기 때문에, 부모 자식 관계에서 데이터를 전달하게 된다.

위에서 아래로 흐르는 데이터 흐름이 깊어질 수록 데이터를 전달하는데 불편함이 생긴다.

 

이렇게 구성된 컴포넌트가 있다. 이것은 로그인폼에서 로그인을 하면 Shop과 Cart컴포넌트에 상태를 업데이트 한다.

그리고 product에서 카트에 담으면 Cart에 상태를 업데이트 하는 작업을 한다면,

데이터는 단방향으로 흐르기 때문에 LoginForm에서 Shop과 Cart로 직접 상태를 전달할 수 없다. 

이런 경우 상태 끌어올리기를 통해서 상태를 전달하게 된다.

단방향 흐름은 단순하지만 깊어질수록 복잡해진다. 이런 상황을 해결하기 위해서는 ContextAPI를 사용할 수 있다.

 

 

제공자(provider)

1.createContext

const AuthContext = createContext({
    isLoggedIn : false,
    onLogout : () => {},
    onLogin : () => {},
});

먼저 createContext로 Context를 만들어준다. createContext내부 안에는 제공해줄 데이터의 초기값을 넣어줄 수 있다.

 

2.provider 컴포넌트

export const AuthContextProvider = ({children}) => {
  const [isLoggedIn, setIsLoggedIn] = useState("");

  //로그아웃 핸들러
  const logoutHandler = () => {
    setIsLoggedIn(false);
  };
  //로그인 핸들러
  const loginHandler = (email, password) => {
    setIsLoggedIn(true);
    localStorage.setItem(email, password);
  };
  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        onLogout: logoutHandler,
        onLogin: loginHandler,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

context를 생성하면 provider 컴포넌트를 만들 수 있다. 

provider 컴포넌트에는 상태와 업데이트 핸들러가 들어있다.

provider는 value라는 prop을 가져야 한다.이것을 통해 객체를 전달한다.

  <AuthContextProvider>
    <App />
  </AuthContextProvider>

이렇게 만든 provider 컴포넌트를 사용할 곳에 감싸주면 어디서든 provider에 접근 할 수 있게 된다.

이제 모든 컴포넌트에서 context에 접근이 가능해진다.

 

 

소비자(consumer) 

1.consumer 사용하기

context의 데이터를 사용하려면 사용하고 싶은 컴포넌트로 이동해서 context.Consumer를 사용할 수 있다.

const Navigation = () => {
    return(
        <AuthContext.Consumer>
              {(ctx)=>{
                return (
                    <div>
                        {ctx.isLoggedIn && <p>로그인중</p>}
                        {ctx.isLoggedIn && <button onClick={ctx.onLogout}>로그아웃</button>}
                    </div>
                )
              }}
        </AuthContext.Consumer>
    )
}

context.Consumer는 함수를 갖고 인수로 provider에서 만들어 놓은 객체를 얻는다.

return은 JSX코드를 반환해야한다. 이 return안에서 context의 데이터를 사용할 수 있다.

 

2.useContext 사용하기

useContext를 사용해서 Consumer보다 간단하게 사용할 수 있다.

const Navigation = () => {
    const ctx = useContext(AuthContext);
    return(         
        <div>
            {ctx.isLoggedIn && <p>로그인중</p>}
            {ctx.isLoggedIn && <button onClick={ctx.onLogout}>로그아웃</button>}
        </div>   
    )
}