220916 TIL React 장점 살려 사용하기

컴포넌트 재사용 하기 리액트로 마카오 페이 기능 구현중 버튼에 들어가는 이름만 다르지 똑같은 형태인 버튼 컴포넌트가 여러 개가 존재하는 일이 발생했다. 리액트의 장점 중 하나가 컴포넌트 기반으로 이루어져 있기 때문에 코드의 재사용성이 좋다는 건데 그 장점을 전혀 활용하지 못하고 있었다.

이름만 다른 똑같은 형태의 컴포넌트가 존재하면 범용적인 컴포넌트를 하나 만들어서 이 컴포넌트를 재사용하는 게 좋다는 리뷰를 받았다. 근데 하나의 버튼 컴포넌트가 어떤 이름이 들어오는지 어떻게 알게 할 수 있을지 생각을 해봤다.

상위 컴포넌트가 하위 컴포넌트로 데이터를 주는 props를 이용하면 될 것이라고 대충 짐작하고 시작했다. 그래서 처음에는 name이라는 props를 만들어서 하위컴포넌트에 전달해주는 방법을 사용했다.....