[🛠️ 트러블슈팅] 사용자 정보 관리에서 `user`와 `userInfo`의 혼동 문제 해결

MBTI

회원가입 및 로그인 로직에서 저장된 값과 , 서버와 통신하여 가져온 최신 사용자 정보 값을 혼동

상황:

프로젝트 진행 중, 로그인/회원가입 후 사용자 정보를 관리하는 과정에서 두 가지 서로 다른 정보(user와 userInfo)를 혼동하는 문제가 발생했습니다.

1. user: 회원가입 또는 로그인 시 사용자의 정보를 로컬 스토리지와 전역 상태(AuthContext)에 저장하여 인증을 유지하는 데 사용합니다.
2. userInfo: 사용자가 프로필 페이지에 들어갔을 때, 서버와 통신하여 최신 사용자 정보와 테스트 결과를 불러오기 위해 로컬 스토리지에서 가져온 데이터를 사용합니다.

문제:

• 로그인 후 user 값은 초기 사용자 정보로 설정되지만, 사용자가 프로필 페이지에 들어가거나 정보를 갱신할 때 서버로부터 최신 데이터를 받아와야 했습니다.
• 그러나 회원가입/로그인 시 초기 user 값과 프로필 페이지에서 서버와 통신하여 불러온 최신 사용자 정보(userInfo)를 혼동하게 되어, 로컬 스토리지에 저장된 값과 혼동이 발생했습니다.
• 이로 인해 사용자가 정보를 업데이트하거나 변경할 때, 새로운 정보가 화면에 제대로 반영되지 않았습니다.

해결 방법:

1. user와 userInfo의 역할 구분:
   • user: 로그인/회원가입 시의 초기 정보(ID, 닉네임, 토큰 등)를 포함하며, 로컬 스토리지에 저장하여 전역 상태 관리(AuthContext)에 사용됩니다.
   • userInfo: 프로필 페이지에서 서버와 통신하여 가져온 최신 사용자 정보입니다. 로컬 스토리지의 user와는 다르게 항상 최신의 정보로 업데이트됩니다.
2. 정확한 상태 관리:
   • AuthContext의 user는 로그인 상태와 초기 사용자 정보를 유지하는 데 사용하고, 프로필 페이지에서는 서버와 통신하여 받아온 최신 사용자 정보를 userInfo에 저장하도록 하였습니다.
   • 이로 인해 로컬 스토리지에 저장된 user 값이 아닌, 서버로부터 받아온 최신 정보를 사용하게 되어 데이터의 일관성을 유지할 수 있게 되었습니다.

결과:

이제는 사용자가 프로필 페이지에 들어갔을 때 최신 정보가 정상적으로 반영되며, 테스트 결과나 사용자 정보 변경이 즉시 업데이트됩니다. 또한, 로그인 상태를 유지하는 정보(user)와 서버로부터 최신 정보를 가져오는 부분(userInfo)을 명확하게 구분하여, 혼동 없이 사용자 정보를 관리할 수 있게 되었습니다.

---

1. user vs userInfo

user란?

• user는 AuthContext에서 받아온 사용자 정보입니다.
• 이 정보는 사용자가 로그인할 때 생성된 초기 정보(예: 사용자 ID, 닉네임, 토큰 등)를 포함합니다.
• AuthContext는 애플리케이션 전역에서 사용자 인증 정보를 공유하고, 로그인/로그아웃 상태를 관리합니다.

userInfo란?

• userInfo는 백엔드 서버로부터 추가로 가져온 사용자 정보입니다.
• 이 정보는 사용자가 프로필 페이지에 들어갔을 때, 서버와 통신하여 최신의 사용자 정보를 불러오기 위해 사용합니다.
• 예를 들어, 사용자가 프로필 정보를 업데이트했을 때, 최신 정보를 다시 서버로부터 받아와야 합니다. 이때 userInfo를 사용하여 서버로부터 받아온 최신 사용자 정보를 저장합니다.

2. 왜 userInfo는 null로 초기화되나요?

• userInfo는 서버와 통신하여 데이터를 받아올 때까지 값이 정해지지 않기 때문에 초기 상태로 null로 설정됩니다.
• 컴포넌트가 렌더링될 때, 서버로부터 데이터를 받아오기 전까지는 userInfo가 없으므로 null로 초기화합니다.
• 서버로부터 데이터를 성공적으로 받아오면 userInfo에 그 값을 setUserInfo로 설정합니다.

4. 왜 userInfo를 사용하나요?

• user는 context로부터 받아온 초기 정보이고, 이 정보는 사용자가 로그인할 때 제공된 기본적인 정보일 뿐입니다.
• 하지만, 프로필 페이지에서는 더 최신의 사용자 정보를 필요로 하거나, 사용자가 업데이트한 정보가 반영되어야 합니다.
• 그래서 user 대신 서버와 통신하여 가져온 최신 정보를 담고 있는 userInfo를 사용합니다.

예시 코드 설명

const { user } = useContext(AuthContext); // context로부터 user 받아옴

위의 코드는 context로부터 user 정보를 받아옵니다. 이는 로그인한 사용자의 기본 정보를 담고 있습니다.

const [userInfo, setUserInfo] = useState(null); // 서버에서 받아온 사용자 정보를 저장할 상태

여기서는 서버로부터 받아올 사용자 정보를 담기 위해 userInfo 상태를 선언하고 초기값을 null로 설정합니다.

데이터 흐름

1. 컴포넌트가 마운트될 때 (useEffect 호출):

   • user가 있으면, 서버에 사용자 정보를 요청합니다.
   • 서버로부터 사용자 정보를 받아오면 setUserInfo(response.data)로 상태를 업데이트합니다.

2. userInfo 사용:

   • 최신 사용자 정보를 화면에 표시하기 위해 userInfo를 사용합니다.
   • 예를 들어, 닉네임을 변경하거나 다른 정보를 업데이트할 때도 최신의 사용자 정보를 기반으로 작업합니다.

요약

• user는 로그인 시 초기 정보를 의미하며, AuthContext에서 받아옵니다.
• userInfo는 서버로부터 추가로 받아온 최신 사용자 정보입니다.
• userInfo는 null로 초기화하여, 서버에서 데이터를 받아오기 전까지는 정보가 없는 상태를 나타냅니다.