리액트를 처음 접하면 가장 먼저 마주하게 되는 개념이 바로 State와 Props입니다. 이 두 가지는 리액트 컴포넌트가 데이터를 관리하고 화면을 그려내는 방식을 결정하는 핵심 요소입니다. 오늘은 이들의 차이점과 함께 리액트의 독특한 데이터 흐름에 대해 자세히 알아보겠습니다.
2. 컴포넌트의 상태를 관리하는 ‘State’
State는 컴포넌트 내부에서 관리되는 유동적인 데이터를 의미합니다. 리액트의 React.Component 클래스를 상속받은 컴포넌트에서는 this.state를 통해 이 상태에 접근할 수 있습니다.
-
상태 변경의 규칙: State는 절대로 직접 수정해서는 안 됩니다. 대신 리액트에서 제공하는
setState()메서드를 사용해야 합니다. 이는 리액트가 상태 변화를 감지하고 화면을 다시 그려내기(Re-render) 위해서입니다. -
비동기적 업데이트:
setState()는 성능 최적화를 위해 비동기로 작동할 수 있습니다. 따라서 이전 상태값을 안전하게 참조하려면 객체 대신 **함수 형태의 인자(prevState, props)**를 사용하는 것이 권장됩니다. -
불변성 유지: 리액트는 상태를 업데이트할 때 기존 객체를 직접 바꾸는 것이 아니라, 새로운 객체를 만들어 교체하는 방식을 취합니다.
3. 부모로부터 전달받는 데이터 ‘Props’
Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 읽기 전용 데이터입니다.
-
읽기 전용(Immutable): 자식 컴포넌트 내에서 전달받은 Props를 직접 수정하는 것은 금지되어 있습니다. 만약 데이터를 변경해야 한다면, 부모 컴포넌트에서 State를 변경하여 새로운 Props를 내려줘야 합니다.
-
안정성 확보: 리액트는
PropTypes라이브러리를 통해 전달받는 데이터의 타입을 검증하거나,defaultProps를 통해 기본값을 설정함으로써 컴포넌트의 안정성을 높일 수 있습니다.
4. 리액트의 핵심 원칙: 단방향 데이터 흐름
리액트의 가장 큰 특징 중 하나는 데이터가 위에서 아래로(부모에서 자식으로)만 흐르는 단방향 데이터 흐름(One-way Data Flow)을 따른다는 점입니다.
-
예측 가능성: 데이터가 한 방향으로만 흐르기 때문에 애플리케이션의 동작을 예측하기 쉽고, 버그 발생 시 데이터가 어디서 왔는지 추적하기가 매우 수월합니다.
-
컴포넌트 간 통신: 부모는 자식에게 Props를 통해 데이터를 전달하고, 자식은 부모가 전달해준 ‘콜백 함수’를 실행함으로써 부모의 상태를 변경할 수 있는 신호를 보냅니다.
5. 상태가 없는 함수형 컴포넌트 (Stateless Functional Components)
때로는 State나 복잡한 생명주기 메서드 없이, 단순히 Props를 받아 화면에 그리기만 하는 컴포넌트가 필요합니다. 이를 함수형 컴포넌트라고 합니다.
-
효율성: 함수형 컴포넌트는 클래스 기반 컴포넌트보다 메모리 자원을 적게 소모하며, 구조가 단순하여 테스트와 재사용이 용이합니다.
-
순수 함수: 입력(Props)에 대해 항상 동일한 출력(UI)을 내놓는 ‘순수 함수’의 성격을 가지므로 코드가 매우 직관적입니다.
리액트 개발의 핵심은 적절한 곳에 State를 배치하고, 이를 Props를 통해 효율적으로 분배하는 것입니다. 단방향 데이터 흐름이라는 원칙을 이해한다면, 규모가 큰 애플리케이션에서도 데이터의 일관성을 유지하며 안정적인 개발을 할 수 있습니다.