1. 문제 현상

---

• 마이 페이지에서 프로필 이미지를 변경하면 상단의 헤더에 있는 프로필 사진도 같이 바뀌어야 했지만 바뀌지 않는 문제가 생겼다.

2. 문제 원인

---

• 마이 페이지에서 프로필 이미지를 변경하면 상단의 헤더에 있는 프로필 사진도 같이 바뀌어야 했지만, Profile 컴포넌트에 image 변경 state가 있어 더 상위 컴포넌트인 LoginHeader 컴포넌트로 state를 보내줄 수가 없었다.

• 그래서 처음에는 image state를 글로벌로 설정해서 LoginHeader 컴포넌트와 이미지 변경 이벤트가 발생하는 Profile 컴포넌트로 각각 보내줄 생각을 했다.

• 그런데 console.log(getImageData.imageUrl); 이렇게 콘솔에 출력해보면 imageUrl을 불러오는데 console.log(image); image state를 콘솔에 출력해보면 값이 불러올 수가 없었다.

function App() {
  const [userData, setUserData] = useState<UserData[]>([]);

  // 나의 유저 정보만 불러오는 get 요청
  const getUserData = async () => {
    try {
      const res = await axios.get("http://localhost:3001/user/1");
      setUserData(res.data);
    } catch (err) {
      console.error(err);
    }
  };
  useEffect(() => {
    getUserData();
  }, []);

  const getImageData: any = userData;

  const [image, setImage] = useState<string>(getImageData.imageUrl);

  console.log(getImageData.imageUrl);
  console.log(image);

  return (
    <div className='App'>
      <GlobalStyle />
      {/* <LogoutHeader /> */}
      <LoginHeader />
      <Routes>
        <Route path='/' element={<Main />} />
        <Route path='/NewDiary' element={<NewDiary />} />
        <Route path='/addplaylist' element={<Addplaylist />} />
        <Route path='/Mypage' element={<Mypage />} />
        <Route path='/Login' element={<Login />} />
        <Route path='/Signup' element={<Signup />} />
        <Route path='/DetailDiary/:diaryId' element={<DetailDiary />} />
      </Routes>
    </div>
  );
}

export default App;

3. 문제 해결

---

• 이 문제는 LoginHeader 컴포넌트에서 해당 유저의 imageUrl을 불러오는 통신을 추가만 해주면 되는 간단한 문제였다.

• 처음에 state를 전달해주어야 한다는 생각만 계속 들어 다른 방법을 생각하지 못한게 문제 해결까지 시간이 걸리게 만들었던 것 같다.