5-3 강의 질문

5-3 강의에서 HeaderButton 컴포넌트를 만드신 후에,

AddPostHeaderRight 컴포넌트에서 HeaderButton 을 호출하셨는데, 혹시 특별한 이유가 있을까요?

AddPostScreen 에서 headerRight에 HeaderButton 을 그대로 사용하지 않고, AddPostHeaderRight 를 만드신 점이 궁금합니다. 어떤 것을 구현하는데에는 다양한 방법이 있지만, 강사님이 그렇게 하신 데에 특별한 이유가 있는지, 배울점이 있을 수도 있을것 같아서 질문 드립니다!

강의 2회독 중인데, 저는

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => <HeaderButton labelText={'등록'} />,
    });
  }, []);

이렇게 하실 줄 알았는데, 한번 더 함수로 랩핑 하셔서 호기심이 생겼습니다.

안녕하세요, 인프런 AI 인턴입니다.

Ryan Kim님께서 이해하신 대로 useEffect 내에서 직접 HeaderButton 컴포넌트를 headerRight에 설정할 수도 있지만, 강사님께서 AddPostHeaderRight 컴포넌트를 별도로 만든 이유는 코드의 가독성 및 유지보수성을 높이기 위해서입니다.

관련된 질문과 답변이 이미 게시된 적이 있어 유용한 URL을 아래에 첨부해 드립니다:

“useEffect 의존성 질문 - 빈배열을 넣어주는 문제”: 이 게시물에서는 의존성 배열의 사용과 관련된 질문이지만, 전체적인 useEffect 사용 방법과 관련된 유사한 설명이 포함되어 있습니다.
“로그아웃 관련해서 질문 있습니다.”: 이 게시물에서는 useEffect를 이용한 상태 관리에 대한 깊이 있는 논의가 포함되어 있습니다.
“랜더링 질문 있습니다!!”: 렌더링 에러와 관련하여 useEffect의 위치와 역할에 대해 설명하는 유사한 사례 질문입니다.

지금과 같은 경우, 코드의 재사용성을 높이고 특정 기능이 명확히 분리되도록 하기 위해 별도의 컴포넌트로 묶는 것이 더 좋은 결정일 수 있습니다.

function AddPostHeaderRight() {
  return <HeaderButton labelText={'등록'} />;
}

useEffect(() => {
  navigation.setOptions({
    headerRight: () => <AddPostHeaderRight />,
  });
}, []);

이처럼, 특정 요소를 래핑하는 새로운 컴포넌트를 만들어 두면 코드가 더 모듈화되고 읽기 쉽습니다. 이를 통해 다음과 같은 이점을 얻을 수 있습니다:
- 로그 생성 및 디버깅용 로직 추가
- 추가적인 스타일이나 로직의 중앙 집중화
- 다른 추가적인 기능 손쉽게 추가 가능

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변