5-3 강의 질문

Question

5-3 강의에서 HeaderButton 컴포넌트를 만드신 후에, AddPostHeaderRight 컴포넌트에서 HeaderButton 을 호출하셨는데, 혹시 특별한 이유가 있을까요?   AddPostScreen 에서 headerRight 에 HeaderButton 을 그대로 사용하지 않고, AddPostHeaderRight 를 만드신 점이 궁금합니다. 어떤 것을 구현하는데에는 다양한 방법이 있지만, 강사님이 그렇게 하신 데에 특별한 이유가 있는지, 배울점이 있을 수도 있을것 같아서 질문 드립니다!   강의 2회독 중인데, 저는 useEffect(() => { navigation.setOptions({ headerRight: () => <HeaderButton labelText={'등록'} />, }); }, []); 이렇게 하실 줄 알았는데, 한번 더 함수로 랩핑 하셔서 호기심이 생겼습니다.

Kyo · Answer

저는 컴포넌트를 분리해준것이구요, 말씀하신대로 하셔도 됩니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Ryan Kim님께서 이해하신 대로 useEffect 내에서 직접 HeaderButton 컴포넌트를 headerRight 에 설정할 수도 있지만, 강사님께서 AddPostHeaderRight 컴포넌트를 별도로 만든 이유는 코드의 가독성 및 유지보수성을 높이기 위해서입니다. 관련된 질문과 답변이 이미 게시된 적이 있어 유용한 URL을 아래에 첨부해 드립니다: “useEffect 의존성 질문 - 빈배열을 넣어주는 문제” : 이 게시물에서는 의존성 배열의 사용과 관련된 질문이지만, 전체적인 useEffect 사용 방법과 관련된 유사한 설명이 포함되어 있습니다. “로그아웃 관련해서 질문 있습니다.” : 이 게시물에서는 useEffect를 이용한 상태 관리에 대한 깊이 있는 논의가 포함되어 있습니다. “랜더링 질문 있습니다!!” : 렌더링 에러와 관련하여 useEffect의 위치와 역할에 대해 설명하는 유사한 사례 질문입니다. 지금과 같은 경우, 코드의 재사용성을 높이고 특정 기능이 명확히 분리되도록 하기 위해 별도의 컴포넌트로 묶는 것이 더 좋은 결정일 수 있습니다. function AddPostHeaderRight() { return ; } useEffect(() => { navigation.setOptions({ headerRight: () => , }); }, []); 이처럼, 특정 요소를 래핑하는 새로운 컴포넌트를 만들어 두면 코드가 더 모듈화되고 읽기 쉽습니다. 이를 통해 다음과 같은 이점을 얻을 수 있습니다: - 로그 생성 및 디버깅용 로직 추가 - 추가적인 스타일이나 로직의 중앙 집중화 - 다른 추가적인 기능 손쉽게 추가 가능 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.