개념
리액트에서 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각이라고 설명드릴 수 있습니다. 컴포넌트는 특정 기능이나 UI 요소를 캡슐화합니다. 잘 만들어진 컴포넌트는 주로 단일 책임 원칙을 따릅니다.
리액트 내에서 컴포넌트는 크게 클래스형과 함수형으로 나눌 수 있는데, 최근에는 Hooks의 도입으로 함수형 컴포넌트가 주로 사용되고 있습니다. 함수형 컴포넌트는 더 간결하고 이해하기 쉬운 코드를 작성할 수 있게 해줍니다.
컴포넌트의 주요 장점은 재사용성과 유지보수성입니다. 예를 들어, 버튼 컴포넌트를 한 번 만들면 여러 페이지에서 다양한 스타일과 기능으로 재사용할 수 있습니다. 또한 컴포넌트는 props를 통해 부모로부터 데이터를 전달받을 수 있어, 동적인 UI를 손쉽게 구현할 수 있습니다.
고려사항
React 컴포넌트 설계 시에는 다음과 같은 사항들을 고려해야 합니다.
첫째, 하나의 컴포넌트가 너무 많은 책임을 갖지 않도록 해야 합니다. 컴포넌트의 역할이 명확하도록 설계해야 합니다. 물론, 이를 고려하지 않아도 정상 작동은 하겠지만, 추후의 유지보수성을 고려해야 하는 상황이라면 하나의 컴포넌트가 너무 많은 책임을 가지지 않도록 하는 것이 중요합니다. 대표적인 예시로, 비즈니스 로직과 UI 로직을 철저히 분리하는 것을 들 수 있습니다.
둘째, 재사용성을 고려해야 합니다. 만약 특정 컴포넌트가 여러 상황에서 재사용될 가능성이
높다면 유연하게 설계해야 추후 재사용이 용이합니다. props를 통해 필요한 데이터와 동작을 주입받아 다양한 상황에서 쉽게 재사용될 수 있도록 하는 것이 좋습니다. 이를 '컴포넌트가 춤을 춘다'고 비유적으로 표현하기도 합니다.
셋째, 성능 최적화를 고려해야 합니다. 불필요한 리렌더링을 방지하기 위해 메모이제이션을 적절히 활용하고, 컴포넌트의 크기를 적절히 유지해야 하는 것이 좋습니다.
사실, 이밖에도 고려해야 할 상황이 정말 많으며, 앞서 말씀드린 사항들이 모든 상황에 똑같이 적용되는 것도 아닙니다. 가장 중요한 것은, 각각의 상황에 맞는 컴포넌트를 만드는 것이라고 생각합니다. 유지보수성, 성능, 재사용성 등이 어떠한 상황에서는 중요할 수도, 어떠한 상황에서는 중요하지 않을 수도 있습니다. 이를 적절하게 판단하여 당장의 상황에 부합하는 최적의 컴포넌트를 만들어 내기 위해 고민하는 태도가 중요합니다.