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

0_0_yoon.log

yoon

문제상황
부모 컴포넌트와 자식 컴포넌트 간의 상호작용이 필요한 경우.
하나의 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번으로 구현했다.

리액트 양방향 데이터 흐름 구현

댓글