🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

rightElements 배열

23.06.14 22:41 작성 23.06.14 22:46 수정 조회수 290

1

안녕하세요 Header 에서 rightElements에 배열로 넘기는 것 처럼 사용하는 것을 처음 보는데 자주 사용하는 것인가요??

답변 1

답변을 작성해보세요.

1

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

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

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

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

감사합니다 :)

purple님의 프로필

purple

질문자

2023.06.15

자세하고 친절한 답변 감사합니다.

채널톡 아이콘