웹 페이지를 만들 때 같은 디자인의 버튼이나 카드를 반복해서 만들어 본 적이 있을 것이다. 코드를 복사해서 붙여넣다 보면 유지보수가 어려워지고 코드는 금방 스파게티처럼 꼬이고 만다. 이러한 문제를 해결하기 위해 등장한 개념이 바로 React 컴포넌트다. 웹 개발의 패러다임을 바꾼 컴포넌트의 개념과 이를 다루는 기본 요소인 props에 대해 아주 쉽게 정리해 본다.

레고 블록처럼 조립하는 React 컴포넌트란 무엇인가

React 컴포넌트는 웹 페이지를 구성하는 독립적이고 재사용 가능한 최소 단위를 뜻한다. 우리가 레고 성을 만들 때 작은 블록들을 조립하는 것처럼, React 앱은 컴포넌트라는 작은 UI 블록들을 조립하여 완성된다. 예를 들어, 웹사이트의 헤더, 네비게이션 바, 그리고 개별 상품 카드 모두가 하나의 컴포넌트가 될 수 있다.

과거에는 HTML, CSS, JavaScript를 각각 다른 파일에서 관리하며 복잡하게 연결해야 했다. 하지만 React 컴포넌트는 화면에 보이는 모습과 작동하는 로직을 하나의 단위로 묶어 관리할 수 있게 해준다. 덕분에 특정 기능을 수정해야 할 때 해당 컴포넌트 파일 하나만 손보면 되므로 코드의 가독성과 유지보수성이 비약적으로 향상된다.

함수형 컴포넌트의 직관적인 구조와 장점

React에서 컴포넌트를 만드는 방법은 크게 클래스형과 함수형 두 가지가 있다. 최근에는 문법이 간결하고 직관적인 함수형 컴포넌트가 사실상의 표준으로 자리 잡았다. 함수형 컴포넌트는 말 그대로 자바스크립트의 함수를 정의하는 것과 같은 방식으로 UI를 작성한다.

함수가 입력값을 받아 결과값을 반환하듯이, 함수형 컴포넌트는 속성(props)을 입력받아 화면에 그려질 JSX(React 엘리먼트)를 반환한다. 코드가 짧아 직관적으로 이해하기 쉽고, 메모리 자원도 클래스형에 비해 덜 소모한다는 강력한 장점이 있다. 여기에 React Hooks라는 강력한 기능이 더해지면서 복잡한 상태 관리까지 함수형 컴포넌트 내부에서 간편하게 처리할 수 있게 되었다.

props 전달로 컴포넌트에 생명력 불어넣기

모든 레고 블록의 색상과 크기가 똑같다면 멋진 성을 만들기 어려울 것이다. 컴포넌트도 마찬가지로 상황에 따라 서로 다른 데이터와 모습을 보여줄 수 있어야 한다. 이때 사용하는 핵심 개념이 바로 props 전달이다. props는 'properties'의 약자로, 부모 컴포넌트가 자식 컴포넌트에 넘겨주는 데이터 주머니라고 생각하면 쉽다.

예를 들어 '회원 프로필'이라는 컴포넌트가 있다면, 사용자마다 이름과 프로필 사진이 달라야 한다. 부모 컴포넌트는 자식 컴포넌트를 호출할 때 이름과 이미지 경로 같은 데이터를 보낸다. 자식 컴포넌트는 이 값을 인자로 받아 화면에 렌더링한다. 한 번 만들어 둔 틀에 다양한 데이터를 주입하여 맞춤형 화면을 실시간으로 만들어내는 마법 같은 기술이다.

컴포넌트 재사용을 극대화하는 설계법

컴포넌트를 만드는 가장 큰 이유 중 하나는 컴포넌트 재사용이다. 잘 설계된 컴포넌트 하나는 프로젝트 전체에서 수십 번, 수백 번 재사용되며 개발 시간을 획기적으로 단축해 준다. 하지만 단순히 코드를 쪼갠다고 해서 저절로 재사용성이 높아지는 것은 아니다.

재사용성을 극대화하려면 하나의 컴포넌트가 단 하나의 역할만 수행하도록 작게 나누는 것이 좋다. 버튼 컴포넌트라면 오직 버튼의 스타일과 클릭 이벤트만 처리하고, 그 안에 표시될 텍스트나 클릭 시 실행될 함수는 외부에서 props로 전달받도록 설계해야 한다. 이렇게 비즈니스 로직과 UI 표현을 적절히 분리하는 것이 유연하고 단단한 리액트 애플리케이션을 만드는 지름길이다.

유연하고 견고한 리액트 앱의 첫걸음

React 컴포넌트와 props의 개념을 명확히 이해하는 것은 모던 웹 프론트엔드 개발의 출발점과 같다. 컴포넌트 단위로 생각하는 습관을 기르면 복잡한 화면도 단순한 블록의 조합으로 바라보는 안목이 생긴다. 오늘 살펴본 기본기를 바탕으로 직접 작은 컴포넌트를 설계하고 props를 전달해 보며 나만의 재사용 가능한 UI 라이브러리를 만들어 보길 바란다.