DiaryProject(React) - 자식, 부모 컴포넌트간 state 공유

참고자료

개요

• 각자 작업한 컴포넌트를 메인페이지로 합치는 작업을 완료했다.
• 아래 이미지의 작성 완료 버튼을 누르면 각 컴포넌트의 데이터를 서버로 전송해야 했다. - 여기서 문제점이 발생했다. state를 모두 자식 컴포넌트에서 관리하고 있어 부모 컴포넌트로 자식 컴포넌트의 state value를 가져와야 했다.

해결방법

내가 선택한 방법은 부모 컴포넌트에서 State를 재선언하고 자식 스테이트와 값을 주고 받을 수 있는 환경으로 만드는 것이였다. 아래 코드 예시를 작성해봤다.

Diary.jsx
const Diary = () => { // 부모 컴포넌트
  const [diaryContent, setDiaryContent] = useState(''); 
  // 기존 자식 컴포넌트에서 관리하던 state를 부모 컴포넌트로 이동

  const onClick = () => {
    postMainPageSubmit();
  };
  return (
    <>
      <Tabs/>//자식컴포넌트1
      <ImageUpload /> // 자식컴포넌트 2
      <DairyContent setDiaryContent={setDiaryContent} onClick={onClick} /> 
        // 자식컴포넌트 3 < 여기서 작업한 내용을 다뤘음
    </>

• 자식 컴포넌트에서 관리하던 diaryContent state를 부모 컴포넌트로 이동했고, 하단 jsx로 setDiaryContent props를 전달했다.

DairyContent.jsx
const DairyContent = memo((props) => { // 부모 컴포넌트에서 전달한 props를 인자로 받음
  const diaryChange = (e) => {
    props.setDiaryContent(e.target.value); // diaryContent state값을 자식에서 변경하고 부모로 전달한다. 
  };
  const onSubmitBtn = () => {
    props.onClick(); // 동일한 원리로 자식 컴포넌트에서 발생한 onclick 이벤트를 부모 컴포넌트의 이벤트로 전달한다. 
  };

  return (
    <>
      <div className='paper'>
        <div className='paper-content'>
          <textarea onChange={diaryChange} placeholder='일기를 입력해주세요!' autoFocus></textarea>
        </div>
        <button onClick={onSubmitBtn} className='submitButton'>
          작성완료
        </button>
      </div>
    </>
  );
});

• 자식 컴포넌트에서 부모 컴포넌트의 props를 받아 하나의 state를 부모-자식 간으로 연결한다.
• 이렇게 연결된 컴포넌트에서 수정사항이 발생함과 동시에 부모 컴포넌트의 state에도 수정이 일어난다.

또다른 문제점

성능 문제. 기존에는 textarea에서 수정을 하면 렌더링이 textarea가 속해있는 자식 컴포넌트만 렌더링이 발생했는데 부모 state와 연결을 했다보니 부모 state값이 변경될 때마다 모든 자식 컴포넌트가 재렌더링 되는 현상이 발생한다. 현재는 소규모라 성능이나 속도에 큰 영향을 주진 않지만 확장성이 매우 떨어진다고 생각했다. 이와 관련된 성능 최적화 방법으로 usememo, usecallback, useeffect를 연구하고 적극적으로 활용해야 된다고 생각한다.