React의 Props: 단순 전달 이상의 의미

React를 배우며 가장 먼저 접하는 개념 중 하나가 props입니다. 간단히 말해 props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있도록 해주는 매개체입니다. 하지만 props는 단순한 데이터 전달 이상의 의미를 갖고 있으며, React의 설계 철학과도 깊이 연결되어 있습니다. 이 글에서는 props의 본질과 React가 이를 어떻게 활용하는지를 깊이 있게 살펴봅니다.

Props란 무엇인가?

React에서 props는 *“properties”*의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 수단입니다. 이 데이터는 컴포넌트의 외부에서 주어지는 것으로, 자식 컴포넌트 입장에서는 수신만 가능하며 직접 수정할 수 없습니다.

• props는 하향식 데이터 흐름(top-down data flow)을 따릅니다.
• React에서는 props를 통해 컴포넌트를 설정하고 커스터마이즈할 수 있습니다.
• 일반 함수의 인자처럼, props도 숫자, 문자열, 배열, 객체, 함수, 컴포넌트 등 어떤 값이든 전달할 수 있습니다.

Props vs State: 데이터의 출처와 목적

React 컴포넌트는 데이터를 기반으로 UI를 렌더링합니다. 이 데이터는 주로 다음 두 가지로 나뉩니다.

• Props: 외부에서 주어지는 데이터. 컴포넌트 자체에서 변경할 수 없음(읽기 전용).
• State: 컴포넌트 내부에서 관리하는 데이터. 변경 가능하며 변경 시 UI가 자동으로 리렌더링됨.

요약하자면, 변경되지 않는 데이터는 props로, 변경 가능한 데이터는 state로 관리합니다.

왜 Props는 불변(immutable)해야 할까?

JavaScript에서 객체는 참조로 전달되기 때문에, 자식 컴포넌트가 props를 변경하면 부모 컴포넌트의 상태까지 의도치 않게 변경될 수 있습니다. 이는 함수 외부 상태를 변경하는 **사이드 이펙트(side effect)**를 유발하며, React는 이를 강하게 지양합니다.

React 컴포넌트는 **순수 함수(pure function)**처럼 동작해야 합니다. 즉, 동일한 입력(props, state)이 주어졌을 때 항상 동일한 출력을 보장해야 하며, 외부 상태를 변경하지 않아야 합니다.

이러한 규칙 덕분에 React는 성능 최적화를 쉽게 수행할 수 있고, 애플리케이션의 예측 가능성과 유지보수성이 높아집니다.

One-Way Data Flow의 힘

React는 **단방향 데이터 흐름(one-way data flow)**을 기반으로 합니다. 이는 데이터가 항상 부모 → 자식 방향으로만 흐른다는 의미입니다. 다시 말해, 자식 컴포넌트는 부모 컴포넌트로 데이터를 직접 전달할 수 없습니다.

이 구조는 다음과 같은 장점을 제공합니다.

• 예측 가능성 증가: 데이터의 출처가 명확해지므로 디버깅이 쉬워집니다.
• 유지보수성 향상: 변경의 영향 범위를 쉽게 파악할 수 있습니다.
• 성능 최적화 유리: React가 데이터 변경을 추적하고 필요한 부분만 리렌더링하기 쉬워집니다.

자식 → 부모 방향 데이터 전달은 불가능할까?

단방향 데이터 흐름만 존재한다면 자식에서 부모로 데이터를 전달하는 것은 불가능할까요? 그렇지 않습니다. React에서는 부모 컴포넌트가 함수(콜백)를 props로 전달하고, 자식 컴포넌트에서 이를 실행함으로써 부모에게 데이터를 전달할 수 있습니다. 이 방법은 다음 섹션에서 자세히 배울 예정입니다.

---

마무리

React의 props는 단순한 데이터 전달 수단이 아닙니다. 그것은 React의 핵심 철학인 컴포넌트 중심 구조, 순수 함수 지향, 단방향 데이터 흐름을 실현하기 위한 핵심 도구입니다. 이러한 개념을 이해하면, React 애플리케이션의 구조를 더욱 탄탄하고 예측 가능하게 설계할 수 있게 됩니다.