카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고

📝 Context API 사용한 인증 관리

Context API 사용 방법

• createContext 메서드를 사용하여 context를 생성한다.
• 생성한 context를 사용할 컴포넌트에 값을 전달하기 위해 Provider로 감싼다.
• Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.
• Provider의 value에 담은 데이터를 전달할 때는 두 가지 방식이 있다: Consumer 컴포넌트와 useContext 훅. 이번 프로젝트에서는 useContext 훅을 사용했다.

---

Context 생성

• Context는 전역적으로 사용할 값을 제공하기 위해 사용된다.

export const AuthContext = createContext<AuthInfo | undefined>(undefined);

• Context 생성 자체는 쉬웠으나, 기본값으로 undefined를 설정하지 않아 오류가 있었다.
  • Context가 없을 때의 예외 처리를 위해 기본값이 필요하다!

---

AuthProvider 컴포넌트

• useState를 사용해 상태를 초기화하고, useEffect로 사이드 이펙트를 관리하는 것이 중요한 패턴이다.
• useEffect의 의존성 배열에 currentAuthToken을 포함시켜 값이 변경될 때마다 효과가 실행되게 한다.
• isReady 상태를 사용해 초기 로딩 상태를 처리하는 방식이 유용했다.

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const currentAuthToken = authSessionStorage.get();
  const [isReady, setIsReady] = useState(!currentAuthToken);
  const [authInfo, setAuthInfo] = useState<AuthInfo | undefined>(undefined);

  useEffect(() => {
    if (currentAuthToken) {
      setAuthInfo({
        id: currentAuthToken,
        name: currentAuthToken,
        token: currentAuthToken,
      });
      setIsReady(true);
    }
  }, [currentAuthToken]);

  if (!isReady) return <></>;
  return <AuthContext.Provider value={authInfo}>{children}</AuthContext.Provider>;
};

 

---

useAuth 훅

export const useAuth = () => useContext(AuthContext);

 

• useContext 훅을 사용하여 Context의 값을 가져오는 방식이 처음에는 익숙하지 않았다.
  • useContext 훅을 사용하여 AuthContext의 값을 가져온다.
  • 이를 통해 어디서든 authInfo를 사용할 수 있다.

 

📝 Daily Scrum 이후

공통

• 지난주 리뷰 받은 작업 검토

---

 

• 오늘 강의 전 설정 작업 수행
• 지난주 학습일지에서 부족했던 부분인 Context API 관련 추가 학습 예정

 

😋 Today 회고

• 지난 주, Context API에 대한 깊은 이해 없이 코드를 작성하다 보니, 전체적인 흐름은 파악할 수 있었지만 세부적인 작동 방식은 이해하기 어려웠다. 예를 들어, Context를 생성하고, Provider를 통해 데이터를 전달하는 과정이 머릿속에 명확히 그려지지 않았다. 코드를 다시 보면서 Context API의 작동 방식을 자세히 이해하게 되었다. 간단히 핵심을 말하자면, Context를 생성하고, Provider를 통해 데이터를 전달하며, 필요한 곳에서 useContext 훅을 사용해 데이터를 불러오는 방식이다. Context API는 전역 상태를 관리하며, props를 통해 데이터를 전달하는 것이 복잡한 프로젝트(props 드릴링을 피할 수 있게 함)에서 도움이 될 것 같다.

 

➡️ 참고 링크

https://ko.legacy.reactjs.org/docs/context.html

Context – React

 

https://velog.io/@jiyaho/React-Context-API%EC%9D%98-%EA%B0%9C%EB%85%90-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95

[React] Context API의 개념 및 사용법