220916 TIL React 장점 살려 사용하기

컴포넌트 재사용 하기

리액트로 마카오 페이 기능 구현중 버튼에 들어가는 이름만 다르지 똑같은 형태인 버튼 컴포넌트가 여러 개가 존재하는 일이 발생했다.

리액트의 장점 중 하나가 컴포넌트 기반으로 이루어져 있기 때문에 코드의 재사용성이 좋다는 건데 그 장점을 전혀 활용하지 못하고 있었다.

 

이름만 다른 똑같은 형태의 컴포넌트가 존재하면 범용적인 컴포넌트를 하나 만들어서 이 컴포넌트를 재사용하는 게 좋다는 리뷰를 받았다.

 

근데 하나의 버튼 컴포넌트가 어떤 이름이 들어오는지 어떻게 알게 할 수 있을지 생각을 해봤다.

상위 컴포넌트가 하위 컴포넌트로 데이터를 주는 props를 이용하면 될 것이라고 대충 짐작하고 시작했다.

 

그래서 처음에는 name이라는 props를 만들어서 하위컴포넌트에 전달해주는 방법을 사용했다.

MenuButton이라는 컴포넌트를 이름만 다른채 세 번을 사용하고 있다.

 

이렇게 사용해도 내가 원하는 모양으로 잘 렌더링되지만 리액트 공식문서 읽던 중 props.children이라는 

 

props.children

바로 children을 사용하는건데 props.children은 간단하게 컴포넌트 태그와 태그 사이에 들어가는 내용을 포함하는 친구이다.

<MenuButton>Hello, world!</MenuButton>

위의 예시에서 MenuButton 컴포넌트 사이에 들어가는 내용인 Hello, world! 전부를 props.children에 들어가고 하위 컴포넌트에서 children으로 받아서 사용할 수가 있다.

 

name에 이름을 적어서 전달하던 버튼의 이름을  MenuButton 컴포넌트 태그 사이에 적어서 하위 컴포넌트에서 children으로 받아서 사용할 수 있다.

 

추가로 나는 h2태그 하나만 컴포넌트로 분리할 정도로  컴포넌트를 쓸데없이 너무 많이 분리했다는것을 알았다.

모든 걸 모든 걸 컴포넌트로 분리해야 하는 줄 알았지만 모든 걸 컴포넌트로 분리하려 하지 말고, 분리할 가치가 있는 것들만 분리하라는 리뷰를 받았다.

오늘 받은 리뷰를 보고 내가 리액트를 사용하는 걸 보면 리액트의 장점을 전혀 살리지 못하고 사용하고 있다는 느낌을 받았다.

심지어 오늘 코딩 인터뷰 시간에 여러가지 질문을 받으면서 리액트를 사용하는 이유도 잘 모르고 있었다는 것을 깨달았다..

 

다음 주도 리액트 이어서 배우는데 코딩 인터뷰 시간에 알려주신 리액트를 사용하는 이유에 대해서 좀 더 깊게 공부하고 리액트의 장점을 잘 살려서 사용해보자!

 

 

참고 : https://ko.reactjs.org/docs/glossary.html#propschildren