🚀 React & Redux에서 상태 업데이트를 이해하기

👉 Redux에서 상태를 업데이트할 때, 예상과 다르게 이전 값이 보이는 이유를 정리해봤습니다.

🎯 1. useEffect는 언제 실행될까?

• useEffect는 컴포넌트가 렌더링될 때 실행돼요.
  그리고 의존성 배열(예: [userInfo])에 있는 값이 바뀔 때마다 다시 실행돼요.
  만약 잘못된 의존성을 넣으면, 불필요한 실행이 발생할 수도 있어요!

useEffect(() => {
    console.log("이 코드는 처음 한 번만 실행됨!");
}, []);  // ✅ 의존성 배열을 빈 배열([])로 설정하면 최초 한 번만 실행됨!

렌러딩?

• 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정

🎯 2. Redux 상태 업데이트는 즉시 반영되지 않는다!

• dispatch({ type: "USER_INFO", payload: null })을 실행해도,
  console.log(userInfo);를 바로 찍으면 이전 값이 보일 수도 있어요! 😵‍💫

💡 왜?

Redux의 상태 변경은 즉시 반영되지 않고, 다음 렌더링 때 적용되기 때문이에요!
React는 렌더링이 끝나기 전까지 상태를 변경하지 않아요!

✅ 해결 방법:

useEffect(() => {
    console.log("userInfo 변경됨:", userInfo);
}, [userInfo]);  // ✅ 상태가 변경된 후 실행되도록 함!

setTimout

• 로그인 만료 시간 후에 실행할 함수 등록
  

dispatch({ type: "USER_INFO", payload: null });

setTimeout(() => {
    console.log(userInfo);  // ✅ 이제 변경된 값이 출력됨, 즉시 호출
}, 0);

🎯 3. localStorage, Redux, useEffect의 관계 이해하기

• localStorage는 브라우저에 저장되는 데이터
  Redux는 애플리케이션 전역 상태를 관리하는 저장소
  useEffect는 localStorage에서 토큰을 가져와서 Redux에 userInfo를 업데이트하는 역할

👉 이 세 개가 서로 영향을 주기 때문에, 상태 변경 시 불필요한 실행을 막는 것이 중요!

여기서 밑에 userInfo 를 배열 안에 작성하면 userInfo 가 2번 실행수정되면서 2번 로그아웃 해줘야 한다.

useEffect(() => {
    const token = localStorage.getItem("token");
    if (token) {
        axios.get("/ping", { headers: { Authorization: token } })
            .then(res => {
                dispatch({
                    type: "USER_INFO",
                    payload: { userName: "사용자", role: "admin" }
                });
            })
            .catch(err => {
                localStorage.removeItem("token");
                dispatch({ type: "USER_INFO", payload: null });
            });
    }
}, []);  // ✅ 불필요한 실행을 막기 위해 빈 배열([]) 사용

🎯 결론: Redux 상태 변경을 다룰 때 기억해야 할 3가지!

1️⃣ useEffect는 렌더링될 때마다 실행되므로, 불필요한 실행을 막아야 한다!
2️⃣ Redux 상태 변경은 즉시 반영되지 않으므로, useEffect나 setTimeout을 활용해야 한다!
3️⃣ localStorage, Redux, useEffect가 서로 영향을 주므로, 의존성 배열을 신중하게 설정해야 한다!

이 개념을 이해하면 React 상태 관리와 Redux 흐름을 더 쉽게 다룰 수 있어요! 🚀🔥