컴포넌트와 프롭스: 리액트의 진짜 시작

리액트를 공부하기 시작했다면 반드시 만나게 되는 두 용어가 있습니다. 바로 '컴포넌트(Component)'와 '프롭스(Props)'입니다. 리액트의 힘과 매력은 이 두 가지를 이해하는 순간부터 시작됩니다.

컴포넌트란 무엇일까?

컴포넌트는 웹 화면을 나누는 작은 조각, 즉 화면을 구성하는 최소 단위입니다. 마치 레고 블록처럼 독립적으로 만들고, 필요한 곳에 조립하여 원하는 기능과 화면을 자유롭게 완성할 수 있게 해줍니다. 하나의 버튼, 입력창, 헤더·푸터 등은 모두 각각의 컴포넌트가 될 수 있습니다.

컴포넌트는 자바스크립트 함수와 비슷합니다. 입력을 받아 결과를 반환하는 함수처럼, 컴포넌트도 전달받은 값(props)을 바탕으로 화면에 보여질 내용을 반환합니다.

function Welcome(props) {
  return <h1>안녕하세요, {props.name}!</h1>;
}

여기서 Welcome이라는 컴포넌트는 name이라는 값을 받아 해당 값을 화면에 출력합니다.

프롭스란 무엇일까?

프롭스(props)는 부모 컴포넌트가 자식 컴포넌트에게 전해주는 값입니다. 실제로 여러 페이지나 여러 요소가 반복적으로 재사용될 때, 프롭스를 통해 각기 다른 데이터를 전달합니다. 이를 통해 컴포넌트는 동일한 틀을 유지하면서도 다양한 내용을 표시할 수 있습니다.

프롭스는 읽기 전용(read-only)입니다. 자식 컴포넌트에서는 프롭스의 값을 변경할 수 없습니다. 만약 바꿔야 한다면 반드시 부모가 새 값을 넘겨줘야 합니다. 이는 데이터 흐름을 명확히하는 중요한 규칙입니다.

<Welcome name="민준" />
<Welcome name="지수" />

이 예제처럼 Welcome 컴포넌트에 각각 다른 name 값을 전달할 수 있습니다. 그 결과, "안녕하세요, 민준!", "안녕하세요, 지수!"가 화면에 각각 나타납니다.

컴포넌트와 프롭스의 유기적 관계

컴포넌트와 프롭스가 만나는 순간, 작은 단위의 컴포넌트를 조합해 큰 화면을 효율적으로 만들어 나갈 수 있습니다. 마치 붕어빵 틀에 따라 속재료(프롭스)가 다르듯, 컴포넌트는 같은 구조로 다양한 데이터를 표현합니다. 이 방식 덕분에 코드 재사용성과 유지보수가 극적으로 좋아집니다.

실전에서 컴포넌트/프롭스가 빛나는 순간

실제 프로젝트를 진행하다 보면 여러 곳에서 같은 레이아웃이나, 기능을 반복해 사용하게 됩니다. 예를 들어 사용자 프로필, 알림 메시지, 버튼 등은 프로젝트 곳곳에 등장하지만, 프롭스를 활용한 컴포넌트로 만들어두면 어떤 데이터든 쉽게 반영할 수 있습니다.

이처럼 리액트의 진정한 출발점이자, 웹 개발 생산성을 높이는 비밀은 바로 컴포넌트와 프롭스에 있습니다. 익숙해질수록 강력한 도구임을 직접 체감할 수 있습니다.