리액트(react.js) 컴포넌트란 무엇인가?

리액트의 컴포넌트에 대해 알아보자

리액트를 배우면서 가장 먼저 배웠던 컴포넌트(Component)는 웹 페이지를 구성하는 가장 작은 구성 요소라고 생각하면 된다. 예를 들어, 우리가 웹페이지에서 자주 보는 버튼, 입력창, 헤더, 푸터 등 각각 하나의 컴포넌트가 될 수 있다. 또한 작은 컴포넌트가 모여 하나의 페이지도 컴포넌트가 될 수 있으며 결국 컴포넌트는 하나의 HTML 코드 덩어리를 쉽게 재사용할 수 있도록 만들어주는 코드 블록이라고 생각하면 좋다. 리액트를 공부하다 보면 세상이 모두 컴포넌트로 보인다는 말을 들었는데.. 맞는 말인 것 같다..!

컴포넌트를 왜 사용할까?

컴포넌트를 사용하는 이유는 크게 세 가지로 말할 수 있다.

1. 재사용이 가능함
   • 예를 들어, 버튼을 만들 때 같은 버튼을 여러 곳에서 사용해야 한다면, 매번 버튼을 새로 만들 필요가 없이 한 번 만든 버튼 컴포넌트를 여러 곳에서 재사용할 수 있으며, 사용하는 용도에 따라 props으로 전달해서 사용할 수 있음
2. 유지보수가 좋음
   • 웹 페이지가 복잡해지면, 모든 코드를 한 곳에 다 넣어두면 관리하기 힘들어진다. 컴포넌트를 사용하면 작은 단위로 나누어 관리할 수 있어서 수정 및 유지보수하기가 훨씬 수월함
3. 구조화
   • 컴포넌트를 사용하면 코드가 좀 더 깔끔해지고 체계적으로 보이게 된다. 이러면 다른 사람과 협업 시 설명 및 이해하기 쉬움

그럼 컴포넌트를 어떻게 사용해야 잘 사용하는 것일까?

최근 과제를 진행하며 많이 고민했던 부분이다. “어떻게 컴포넌트를 어떻게 사용해야 잘 사용하는걸까?”란 생각이 들었는데, 한번 초보인 나의 머리로 고민하고 너무 너무 많은 컴포넌트를 만들며 진행했다가 대폭 수정하게 되었다.. 컴포넌트를 잘 사용하는 방법을 아래에 작성해보았다.

1. 작고 간단하게 만드는게 좋다.
   • 하나의 컴포넌트는 하나의 일만 해야된다. 너무 많은 기능을 한 컴포넌트에 넣으면 복잡해지니까, 가능한 한 작은 단위로 쪼개는 것이 좋다.
2. 재사용이 가능하게 만드는게 좋다.
   • 나중에 다른 곳에서도 사용할 수 있도록 가능한 한 일반적인 형태로 만들어야한다. 예를들면 버튼을 만들 때 버튼의 색상이나 크기 등을 props로 전달 받아서 다양한 버튼을 만들 수 있게 하는 것이 좋다.
3. 상태 관리
   • 상태(state)는 컴포넌트 내부에서 변화하는 데이터를 말한다. 컴포넌트 내부에서 상태를 잘 관리하는 것도 중요한데, 상태는 꼭 필요한 경우에만 사용하고 그렇지 않으면 상위 컴포넌트에서 props로 필요한 데이터를 전달받는게 좋다.

컴포넌트를 어떻게 분리하는게 좋을까?

개인적으로 어떻게 사용해야 잘 사용하는 걸까와 비슷한 맥락이지만 컴포넌트를 분리할 때 어떻게 접근하면 좋은지(?)에 대해서도 구글링과 튜터님 등 주변 사람들에게 많이 조언을 들어보고 정리해보았다.

1. 반복되는 부분
   • 와이어프레임이나 디자인을 본 후 비슷한 코드를 여러곳에서 반복된다면 먼저 그 부분을 컴포넌트로 분리해서 재사용할 수 있게 생각해본다.
2. 독립적인 기능
   • 특정 기능이나 UI요소가 독립적으로 동작한다면 그 부분을 컴포넌트로 분리하면 좋다. 예를 들어서 웹 페이지의 헤더는 대부븐 독립적으로 기능을 하니 헤더를 별도의 컴포넌트로 만드는것으로 다른 부분도 비슷하게 생각해보면 좋을 것 같다.
3. 단일 책임
   • 개인적으로 이 부분을 가장 많이 들었는데, 하나의 컴포넌트는 가능하면 한 가지의 역할만 담당한다는 것이다. 이전에는 버튼 컴포넌트를 만들고 button 태그를 div로 감싸고 또 다른 태그를 사용하여 버튼 컴포넌트의 역할이 애매해져버렸는데, 그렇다보니 재사용하기 힘들어서 전부 수정했다.

컴포넌트 사용 시 할 수 있는 실수들

1. 불필요한 props 전달
   • 이 부분은 개인적으로 가장 어려운 부분이다. 부모 컴포넌트에서 자식 컴포넌트로 많은 props를 전달하면, 자식 컴포넌트가 많이 복잡해질 수 있다. 필요한 정보만 선별적으로 전달하는 것이 좋으며, 가능하면 이름도 누구나 이해할 수 있게 네이밍하면 좋을 것 같다.
2. props의 변경
   • props는 읽기 전용으로 이를 변경하려면 부모 컴포넌트에서 상태를 관리하고 자식아게 변경된 props를 전달해야한다. 개인적으로 비유를 통해 이해가 더 잘 되었던 부분인데, 엄마,아빠가 자식한테 폰 보여달라하고 수정할 순 있는데 자식이 엄마,아빠 폰 달라하고 변경하는것은 말이 안되는…ㅋㅋㅋㅋ
3. 하드코딩된 스타일
   • 이 부분은 구글링하다 알게 된 내용인데, 컴포넌트에 스타일을 하드코딩하는 것은 나중에 유지보수할 때 문제가 될 수있다고 한다. 스타일은 외부 css파일이나 스타일 객체로 분리하여 관리하는 것이 좋다.

마무리

리액트를 공부하고 과제를 진행하며 정말 친숙하지만 어려운 컴포넌트이다. 처음 컴포넌트에 대해 가볍게 이해하고 기능을 만들었는데 엄청나게 유지보수가 어려울 것 같은 컴포넌트 구조가되어서 전체적으로 수정을 했었다. 앞으로도 자주 만날텐데 조금 더 친해질 수 있길 바라며 이해한 내용들을 추려 정리해보았다. 내일도 파이팅이다..!