React의 Props와 State
Props란?
props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터이다.- 읽기 전용이며, 자식 컴포넌트에서
props를 수정할 수 없다.
예시
function ChildComponent(props) {
props.name = "New Name"; // 오류 발생 가능
return <div>{props.name}</div>;
}- 위 코드에서
props를 수정하려고 하면 React의 불변성 원칙에 위배되어 오류가 발생할 수 있다. - 이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높일 수 있다.
State란?
state는 컴포넌트 내부에서 관리되는 동적인 데이터이다.state는 변경 가능하며, 변경 시 컴포넌트가 다시 렌더링되어 UI가 업데이트된다.- 주로 사용자 입력이나 네트워크 요청의 응답 등 변화하는 데이터를 관리할 때 사용된다.
예시
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1); // state 변경
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
Props가 자식 컴포넌트에서 변하지 않는 이유
-
React의 단방향 데이터 흐름 원칙:
- React는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 단방향으로 전달되도록 설계되었다.
- 이를 통해 데이터 흐름을 예측 가능하고 일관성 있게 유지할 수 있으며, 상태 관리가 간단해진다.
-
읽기 전용 특성:
props는 읽기 전용이므로, 부모 컴포넌트에서 전달된 값이 자식 컴포넌트 내에서 임의로 변경되지 않는다.- 특정 상태가 어디서 어떻게 변했는지 예측 가능하므로, 버그 발생 가능성을 줄이고 디버깅을 쉽게 한다.
-
재사용성과 캡슐화 강화:
- 만약
props가 변경될 수 있다면, 자식 컴포넌트는 독립적으로 동작하지 못하고 재사용이 어려워질 수 있다. props가 불변으로 유지됨으로써 외부 입력에만 의존하며 내부적으로 변경하지 않으므로 재사용성이 높아지고 코드의 캡슐화가 강화된다.
- 만약
자식 컴포넌트에서 부모로부터 받은 Props를 변경해야 한다면?
React에서는 자식 컴포넌트가 부모로부터 받은 데이터를 직접 수정할 수 없다. 만약 자식 컴포넌트에서 데이터를 수정해야 하는 경우, 다음과 같은 방법을 사용한다:
상태 끌어올리기 (Lifting State Up)
- 상태를 부모 컴포넌트로 올려서 부모에서 상태를 관리하고, 변경된 상태를 다시 자식에게 props로 전달한다.
- 이를 통해 데이터 흐름은 여전히 단방향으로 유지되며, 상태 관리는 일관성을 갖는다.
예시: 상태 끌어올리기
import React, { useState } from "react";
// 부모 컴포넌트
function ParentComponent() {
const [value, setValue] = useState("Initial Value");
const handleChange = (newValue) => {
setValue(newValue); // 상태 업데이트
};
return (
<div>
<h1>Parent Value: {value}</h1>
<ChildComponent value={value} onChange={handleChange} />
</div>
);
}
// 자식 컴포넌트
function ChildComponent({ value, onChange }) {
const updateValue = () => {
onChange("Updated Value"); // 부모로 상태 변경 요청
};
return (
<div>
<p>Child Value: {value}</p>
<button onClick={updateValue}>Update Parent Value</button>
</div>
);
}
Props와 State의 차이점
| 구분 | Props | State |
|---|---|---|
| 데이터 소유권 | 부모 컴포넌트에서 소유하며 자식에게 전달 | 해당 컴포넌트를 소유하며 내부적으로 관리 |
| 변경 가능 여부 | 읽기 전용 (Immutable) | 변경 가능 (Mutable) |
| 주요 역할 | 부모와 자식 간 데이터 전달 | 동적인 데이터 관리 |
| 수정 방법 | 부모에서만 수정 가능 | setState 또는 useState를 통해 수정 가능 |
| 컴포넌트 재렌더링 | props 자체는 재렌더링을 유발하지 않음 (부모가 props를 변경하면 재렌더링) | state 변경 시 항상 해당 컴포넌트를 재렌더링 |
보충: Props와 State의 올바른 사용법
-
Props 사용 시 주의사항:
- 불필요한 데이터를 props로 전달하지 않는다.
- 함수형 프로그래밍 원칙에 따라 props는 순수 함수처럼 사용해야 한다.
-
State 사용 시 주의사항:
- 최소한의 state만 유지한다.
- 파생된 state(derived state)는 가능한 계산으로 처리하고 중복 저장하지 않는다.
-
상태 끌어올리기 활용:
- 여러 하위 컴포넌트가 동일한 데이터를 공유해야 할 때 상태를 부모로 끌어올려 일관성을 유지한다.
-
불변성 유지:
- React에서는 불변성을 유지하는 것이 중요하다. 객체나 배열을 수정하기보다는 새로운 객체나 배열을 생성하여 업데이트해야 한다.
결론
React에서 props와 state는 각각 다른 목적과 역할을 가진다. props는 부모에서 자식으로 데이터를 전달하기 위한 읽기 전용 속성이며, 단방향 데이터 흐름을 통해 예측 가능한 애플리케이션 구조를 만든다. 반면 state는 동적인 데이터를 관리하며, 사용자 상호작용이나 외부 응답에 따라 UI를 업데이트하는 데 사용된다. 이 두 가지 개념을 적절히 활용하면 재사용성과 유지보수성이 높은 React 애플리케이션을 개발할 수 있다.
안녕하세요 김선명입니다.