회고 리스트

1. 리액트 훅 useEffect에서 async/await 을 어떻게 쓰이는지 간단한 예를 들어 설명하시오.

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await getCategories();
      setCategories(res.data);
    } catch (err) {
      console.error(err);
    }
  };

  fetchData();
}, []);

useEffect는 async 콜백을 직접 쓸 수 없기 때문에 함수 내부에 async 함수(fetchData)를 정의하고 즉시 실행하는 방식으로 사용한다.

2. useEffect 에서 3가지 용도는?

- useEffect(() => {...})

: 매 렌더링마다 실행
: 디버깅, 리액트 렌더링 확인 등

- useEffect(() => {...}, [])

: 마운트 시 한 번만 실행 (API 호출 등)
: 초기 API 호출, 이벤트 리스너 등록 등

- useEffect(() => {...}, [x])

: x가 바뀔 때만 실행
: 특정 상태 변화에 따른 처리

3. 아래의 코드에는 문제(무한반복)가 있습니다. 무한반복이 일어나는 원인을 설명하시오.

useEffect(() => {
  // 카테고리 가져오기
  getCategories()
    .then((res) => {
      console.log(res);
      setCategories(res.data);
    })
    .catch((err) => {
      console.log(err);
    });
}, [categories]);

setCategories가 실행되면 categories 값이 바뀌고 의존성 배열 [categories]에 의해 useEffect가 또 실행되어 무한반복이 발생한다.

useEffect(() => {
  getCategories().then((res) => {
    setCategories(res.data);
  });
}, []);

제일 마지막에 categories를 빼면 최초 1회만 실행되어 무한 반복을 해결할 수 있다.

4. 리액트에서 화면 생성과 업데이트가 되는 경우를 정리 하시오

- 화면 생성

: useEffect(() => {...}, [])
: 컴포넌트가 처음 렌더링 될 때 발생
: 예시로는 컴포넌트 진입 시

- 업데이트

: useEffect(() => {...}, [변수])
: 상태(state)나 props 변경 시 발생
: 예시로는 검색어 입력, 버튼 클릭 등

5. JWT 에 대하여 설명하시오.(예습)

JWT는 사용자 인증을 위해 서버가 발급하는 JSON 형태의 토큰이며 Header.Payload.Signature 세 부분으로 구성된다.

토큰 자체에 유저 정보와 만료 시각이 포함되며 서버는 토큰만 보고 인증 가능하다. (stateless)
Payload는 Base64 인코딩만 되기 때문에 민감정보는 Payload에 담으면 안된다.

토큰 종류	용도	유효기간
Access Token	요청 인증	짧음 (예: 3일)
Refresh Token	Access 갱신	김 (예: 7일)