[React] useEffect와 async/await, 무한루프 원인 정리 + JWT 기초

1. useEffect에서 async/await 사용하는 법

실제 프로젝트에서 자주 쓰이는 useeffect + async/awiat 예제 상황 5가지입니다.

useEffect는 직접 async 함수를 받을 수 없습니다. 따라서 내부에 async 함수를 정의하고 즉시 실행해야 합니다.

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch('/api/data');
      const data = await res.json();
      console.log(data);
    } catch (error) {
      console.error(error);
    }
  };
  fetchData();
}, []);

• ❗️useEffect(async () => {...}) 이렇게 직접 쓰면 안 됩니다.
• 내부에서 async 함수를 선언하고 호출하는 방식으로 사용합니다.

2. useEffect의 3가지 용도 정리

설정	실행 타이밍	주 용도
useEffect(() => {...})	매 렌더링마다	DOM 조작, 로그 등
useEffect(() => {...}, [])	최초 마운트 시 한 번만 실행	API 호출, 초기 데이터 세팅
useEffect(() => {...}, [x])	x 변경 시에만 실행	특정 값 변경 감지

3. 무한 반복 발생 예시와 원인 분석

useEffect(() => {
  getCategories()
    .then((res) => {
      console.log(res);
      setCategories(res.data);
    })
    .catch((err) => {
      console.log(err);
    });
}, [categories]); // ❌

📌 문제점:

setCategories가 categories를 바꾸면 → useEffect 재실행 → 다시 setCategories 실행 → 무한 반복 🔁
✅ 해결 방법:

useEffect(() => {
getCategories()
.then((res) => setCategories(res.data))
.catch((err) => console.log(err));
}, []); // ✅ 최초 1회만 실행

---

4. 컴포넌트 생성(Mount)과 업데이트(Update) 구분

구분	언제 발생?	예시	useEffect 활용
생성(Mount)	컴포넌트가 처음 렌더링될 때	페이지 최초 진입, 초기 API 호출 등	useEffect(() => {...}, [])
업데이트(Update)	상태(state) 또는 props 변경 시	버튼 클릭 → 상태 변경, props 업데이트 등	useEffect(() => {...}, [state])

5. JWT(JSON Web Token)란?

JWT는 로그인 등의 인증을 위해 사용하는 토큰 기반 인증 방식입니다.

🔹 구조
Header.Payload.Signature
Header: 해시 알고리즘 정보 (alg, typ)
Payload: 사용자 정보 (userId, role 등)
Signature: 위 내용에 대한 서명 (무결성 보장)
🔹 특징
서버는 로그인 시 JWT 발급 → 클라이언트는 이 토큰을 저장(localStorage, cookie) 후 요청마다 사용
서버는 토큰이 변조되지 않았는지만 확인하면 됨 → 세션 유지 불필요
🔹 장단점
✅ 장점: 서버 상태를 유지할 필요 없음, 분산 시스템에 적합
⚠️ 단점: 토큰 탈취 시 위험, Payload는 인코딩되어 있을 뿐 암호화는 아님

🔹 사용 예시
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR...
3줄 정리
useEffect는 의존성 배열에 따라 동작이 달라지며, 잘못 설정하면 무한 루프가 발생할 수 있다.
async/await은 useEffect 내부에서 별도 함수로 사용해야 안전하다.
JWT는 stateless 인증 방식으로, 서버의 부담 없이 사용자 인증을 구현할 수 있다.