문제상황
부모 컴포넌트와 자식 컴포넌트 간의 상호작용이 필요한 경우.
하나의 input 요소를 사용해서 감사메세지와 댓글 및 대댓글을 작성할 수 있도록 구현하는 과정이였다. 이때 input 요소는 감사메세지 컴포넌트가 가지고 있다.
감사메세지(부모 컴포넌트)에서 댓글 및 대댓글(자식 컴포넌트)에게 데이터 전달하는 상황
부모 컴포넌트에서 작성된 댓글 및 대댓글의 응답이 성공이면 작성한 댓글 과 대댓글을 볼 수 있도록 자식 컴포넌트의 특정 함수 호출을 유발할 필요가 있었다.
댓글 및 대댓글(자식 컴포넌트)에서 감사메세지(부모 컴포넌트)에게 데이터 전달하는 상황
대댓글을 구현하기 위해 자식 컴포넌트의 답글 달기를 누르면 부모 컴포넌트의 input 요소의 값을 변경(#${댓글작성자 emil} )해줄 필요가 있었다.
해결과정
https://react.dev/learn/thinking-in-react
리액트에서는 명시적인 데이터 흐름을 유지하기 위해 양방향 데이터 흐름을 가진 경우에도 props 를 사용을 권장한다.
부모 컴포넌트에서 자식 컴포넌트 데이터 흐름 추가
자식 컴포넌트 Props 에 부모 컴포넌트의 상태값을 받을수 있도록 추가했다. 부모 컴포넌트에서 댓글 및 대댓글 작성 응답이 성공이면 상태를 변경시켜 자식 컴포넌트의 특정 함수를 호출을 유발하도록 구현했다.
역방향 데이터 흐름 추가
자식 컴포넌트 Props 에 콜백을 추가하여 답글 달기를 누르면 해당 콜백을 실행시켜 부모 컴포넌트의 상태를 변경하도록 구현했다.
문제상황
accessToken(Context api 로 관리) 의 상태가 변경됐는데(새로고침 또는 주소창에 url 로 페이지를 직접 요청하여 accessToken 이 재발급 되는 상황) 하위 컴포넌트인 ProfileNavigation 이 의도한 내용대로 랜더링되지 않았다.
원인: ProfileNavigation 에서 profileUrl 조회 api 함수를 마운트될때만 호출하도록 설정되어 있었기 때문에 속성 값이 변해도 profileUrl 조회 api 함수를 호출 하지 않았다.
해결
- ProfileNavigation 내부에서 useEffect 의 의존배열에 accessToken 을 추가해서 accessToken 속성이 변경되면 profileUrl 조회 api 함수 호출하도록 구현한다.
- accessToken 을 관리하는 context 에 isLoading(accessToken 재발급 함수 완료 여부를 나타내는) 상태 값을 추가하여 accessToken 재발급 함수가 완료된 후에 컴포넌트 마운트를 시킨다.
1번의 경우 최초에 defaultImage 가 잠깐 나왔다가 회원의 프로필 사진으로 변경된다.
2번의 경우 accessToken 재발급 함수가 완료될때 까지 loading.. 문구를 보여주고 완료되면 컴포넌트를 마운트 시켜 defaultImage 또는 회원의 프로필 사진을 보여준다.
2번이 사용자 경험측면에서 더 자연스럽다고 판단하여 2번으로 구현했다.
