React에서 상태(state)와 props 비교하기

 

React는 현대적인 웹 애플리케이션 개발에서 가장 널리 사용되는 JavaScript 라이브러리 중 하나입니다. React의 핵심 개념 중 하나는 컴포넌트 기반 아키텍처인데, 이 아키텍처를 이해하기 위해서는 상태(state)와 props(속성)를 정확히 이해하는 것이 매우 중요합니다. 이 글에서는 React의 상태와 props의 차이점을 비교하고, 언제 어떤 것을 사용하는지에 대해 명확히 설명하겠습니다.

---

1. 상태(state)란 무엇인가?

상태의 정의

상태(state)는 React 컴포넌트 내에서 관리되는 동적인 데이터입니다. 상태는 컴포넌트의 동작이나 렌더링 방식에 직접적인 영향을 미치며, 시간이 지나면서 변경될 수 있습니다. 상태는 일반적으로 사용자 입력, 네트워크 요청, 또는 타이머와 같은 외부 이벤트에 의해 변화합니다.

상태의 주요 특징

1. 내부적 관리: 상태는 컴포넌트 내에서 정의되고 관리됩니다. 다른 컴포넌트에서는 해당 상태를 직접 수정할 수 없습니다.
2. 변경 가능: 상태는 setState(클래스형 컴포넌트) 또는 useState(함수형 컴포넌트)를 통해 변경할 수 있습니다.
3. React에 의해 렌더링 트리거: 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 사용자 인터페이스를 업데이트합니다.

상태의 예제

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 예제에서 count는 상태로 정의되었으며, setCount를 통해 상태를 업데이트합니다. 상태 변경에 따라 React는 컴포넌트를 다시 렌더링합니다.

---

2. Props란 무엇인가?

Props의 정의

Props(속성)는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하기 위해 사용하는 매개변수입니다. Props는 읽기 전용이며, 컴포넌트의 외부에서 전달되는 데이터로 간주됩니다.

Props의 주요 특징

1. 외부에서 전달: Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다.
2. 읽기 전용: Props는 수정할 수 없습니다. 즉, 자식 컴포넌트에서 받은 props를 변경하려고 시도하면 React는 이를 허용하지 않습니다.
3. 동작을 정의하는 데 사용: Props는 컴포넌트의 동작을 구성하거나 렌더링 데이터를 전달하는 데 사용됩니다.

Props의 예제

function Greeting({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

function App() {
  return <Greeting name="홍길동" />;
}

위 예제에서 name은 부모 컴포넌트(App)에서 자식 컴포넌트(Greeting)로 전달된 props입니다. Greeting 컴포넌트는 name 값을 읽어서 렌더링합니다.

---

3. 상태와 Props의 주요 차이점

특징상태(State)Props

데이터 소유권	컴포넌트 내부에서 관리	부모 컴포넌트에서 전달
수정 가능 여부	setState 또는 useState로 변경 가능	읽기 전용, 변경 불가능
역할	컴포넌트의 동적인 동작을 정의	데이터 전달 및 컴포넌트 동작 구성
사용 방법	useState 또는 클래스형의 this.state 사용	JSX 태그의 속성 형태로 전달
렌더링 영향	변경 시 컴포넌트를 다시 렌더링	부모 컴포넌트에서 전달된 값에 따라 렌더링

---

4. 상태와 Props의 관계

상태와 props는 React 컴포넌트 간의 데이터 흐름을 이해하는 데 중요한 요소입니다. 일반적으로 부모 컴포넌트는 상태를 관리하며, 해당 상태를 자식 컴포넌트에 props로 전달하여 UI를 구성합니다.

상태와 Props의 결합 예제

import React, { useState } from 'react';

function ChildComponent({ count, onIncrement }) {
  return (
    <div>
      <p>자식 컴포넌트 - 현재 카운트: {count}</p>
      <button onClick={onIncrement}>증가</button>
    </div>
  );
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent count={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

위 예제에서 부모 컴포넌트(ParentComponent)는 count 상태를 관리하며, 이를 자식 컴포넌트(ChildComponent)에 props로 전달합니다. 자식 컴포넌트는 부모로부터 전달받은 count와 onIncrement를 사용하여 데이터를 표시하고 동작을 수행합니다.

---

5. 상태와 Props를 함께 사용할 때의 주의점

1. 불필요한 상태 사용 자제: 모든 데이터를 상태로 저장할 필요는 없습니다. 가능한 한 props를 사용하여 데이터 흐름을 간소화하세요.
2. 상태와 Props 분리: 상태는 컴포넌트 내부에서 관리되고, props는 부모로부터 전달된다는 원칙을 명확히 이해하세요.
3. 읽기 전용의 원칙 준수: props를 변경하려는 시도는 React의 데이터 흐름 원칙을 위배합니다.
4. 상태 전달 최소화: 상태는 꼭 필요한 컴포넌트에만 전달하여 불필요한 렌더링을 방지하세요.

---

결론

React에서 상태와 props는 컴포넌트 간의 데이터 흐름과 UI를 관리하는 데 핵심적인 역할을 합니다. 상태는 컴포넌트의 내부 데이터로 동적인 변화를 관리하며, props는 부모와 자식 간의 데이터를 전달하는 데 사용됩니다. 이 두 가지 개념을 명확히 이해하면 효율적이고 재사용 가능한 React 컴포넌트를 설계할 수 있습니다. React 애플리케이션을 개발하면서 상태와 props를 적절히 활용하는 것이 성공적인 개발의 열쇠입니다.