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

안녕하세요 질문 감사합니다!

같은 코드일지라도 상황에 따라 좋은 코드가 될 수도 있고 아닌 코드가 될 수도 있기 때문에 사용 빈도에 대한 답을 드리긴 힘들 것 같습니다.

강의처럼 Header가 왼쪽/오른쪽 flexItem으로 나뉘어있고 그 구조가 바뀌지 않을 경우, rightElements를 prop으로 하여 페이지마다 right button들만 추가해주는게 간단한 설계일 수 있습니다.
props.children을 사용해도 되지만, 명시적으로 위치를 알려주기 위해 rightElements 라는 이름을 사용했습니다. 비슷한 예시는 리액트 공식문서에서 발견할 수 있습니다(링크: https://ko.legacy.reactjs.org/docs/composition-vs-inheritance.html#containment).

하지만 이 코드가 유연하지 않은 것은 사실이기 때문에, 기획이 변경될 가능성이 크다면 common/Header 컴포넌트까지 더 잘게 쪼개서 각 페이지의 Header 컴포넌트마다 합성하는 방법도 있어보입니다.

감사합니다 :)