react 합성 가독성

kyj2471·2021년 11월 16일
0

사용하는 이유?

우리는 작업을 하면서 컴퍼넌트에서 어떤 컴퍼넌트가 들어올지 모르는 경우가 생긴다. 새로 만드는 프로젝트뿐 아니라 이미 기존에 존재하는 프로젝트역시 마찬가지다. 어떤 자식 엘리먼트가 들어올지 모르는 상황에서 우리는 children을 사용하면 유지보수에 좋은 효과를 불러올수 있다.

사용 예시

방법 1

아래의 예시를 보면

<Component>
  <Test>
</Component>

위와 같이 컴퍼넌트안에 Test 내용을 설정하면 Component에 children props로 전달됩니다.

const Component = (props) => {
  return <>{props.children}</>;
};

위와 같은 형태로 할 수 있을 것이다.

이렇게 적용하여 children으로 props를 받아왔을때 장점과 단점이 있다고 느낀다.
장점을 생각해보면 보내는 상황에서 Component에 어떤게 props로 넘어가는지 가독성이 매우 좋다고 느껴진다.
한눈에 어떤 내용이 props로 전달되는지 알 수있다.

단점또한 눈에 보인다. 바로 받는쪽이다.
받는 쪽에서 확인했을때 props.children이라고 하면 지금 이 props가 어떤 내용을 전달받았는지 Component만 봤을때는
빠르게 파악하기 힘들다.

방법2

위와 같은 방법을 제외하고 보자.

<Component test={<Test />} />
const Component = (props) => {
  return <>{props.test}</>;
};

2번째 방법을 보면 우선 당연하지만 첫번쨰와 결과는 같다.
첫번쨰와 비교하면 개인적으로 훨씬 좋다고 느낀다.

장점으로는 첫번째와 다르게 받는 부분에서 지금 넘어온 props가 어떤 역할을 하는지 확인하는데 좋다.
이유로는 네이밍만 잘하면 children과같은 것 보다 훨씬더 목적을 명시하기 좋기 떄문이다.

하지만 단점까진 아니라 느껴지지만 나중에 이러한 구조의 컴퍼넌트가 많아졌을때 보내는부분에서 저렇게 보내면
가독성이 첫번쨰에 비해 떨어진다고 생각한다.
그래도 개인적인데 첫번쨰 보다는 훨씬 좋다 생각한다.
그이유는 나중에 내가 아닌 다른사람이 이컴퍼넌트에서 작업을 해야할때 첫번째보단 두번째 방법을 사용할 때 훨씬더 파악이 빠를거라 생각합니다.
(children보다는 목적이 명시된 네이밍을 가진 내용이 JSX형태로 남는게 훨씬 가독성에 좋다 생각합니다.)

방법 3

첫번째 방법을 사용하나 두번째 방법의 단점을 보완한 내용입니다.

<Component>
  <Test>
</Component>
const Component = (props) => {
  const Test = props.children;
  return <>{test}</>;
};

위의 방법은 보낼때는 첫번째의 장점을 가지고 보내고
받을때는 두번째의 목적이 명시된 네이밍을 가지게하는 장점을 가졌습니다.

엄밀히 말하면 첫번째 방법을 사용한 것 입니다.

참고한 사이트

리액트 공식문서 : https://ko.reactjs.org/docs/composition-vs-inheritance.html

profile
[ frontend-developer ]

0개의 댓글