로고

Props와 State의 차이점: Props와 State를 활용한 데이터 흐름 이해와 예제.

작성일 :

Props와 State의 차이점: Props와 State를 활용한 데이터 흐름 이해와 예제

React는 컴포넌트 기반의 라이브러리로, 효율적인 데이터 관리를 위해 Props와 State라는 개념을 활용합니다. 이 둘은 각각 다른 방식으로 데이터 흐름을 처리하며, 이에 대한 명확한 이해는 React 개발에서 필수적입니다. 이번 글에서는 Props와 State의 차이점과 실제 예제를 통해 두 개념을 구체적으로 살펴보겠습니다.

Props (속성)

Props는 컴포넌트의 외부에서 전달되는 데이터 또는 함수입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용됩니다. Props는 읽기 전용으로, 자식 컴포넌트에서는 이를 수정할 수 없습니다. 이 점은 데이터의 일관성을 유지하는 데 중요한 역할을 합니다.

Props의 주요 특징

  1. 읽기 전용: 자식 컴포넌트는 Props를 변경할 수 없습니다. 이는 데이터의 흐름을 한 방향으로 유지하게 합니다.
  2. 외부 데이터 관리: Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 주로 부모 상태를 기반으로 설정됩니다.
  3. 재사용성 향상: 여러 자식 컴포넌트에서 동일한 부모 컴포넌트의 데이터를 사용할 수 있어 코드의 재사용성을 높입니다.

예제

javascript
import React from 'react';

const ChildComponent = ({ message }) => {
    return <h1>{message}</h1>;
};

const ParentComponent = () => {
    const parentMessage = 'Hello from Parent!';
    return <ChildComponent message={parentMessage} />;
};

export default ParentComponent;

위 예제에서 ParentComponent는 ChildComponent에 message라는 Props를 전달합니다. ChildComponent는 이를 읽어 화면에 표시합니다.

State (상태)

State는 컴포넌트 내부에서 관리되는 데이터입니다. 컴포넌트의 상태는 변할 수 있으며, 상태가 변경되면 컴포넌트는 다시 렌더링됩니다. State는 주로 사용자 입력, 네트워크 요청 결과 및 컴포넌트의 다른 내부 데이터에 의해 변경됩니다.

State의 주요 특징

  1. 내부 관리: State는 컴포넌트 내에서 직접 관리되며, 컴포넌트 내부에서만 수정될 수 있습니다.
  2. 변경 가능: State는 setState 또는 useState를 통해 변경할 수 있습니다. 상태가 변경되면 컴포넌트는 다시 렌더링됩니다.
  3. 동적 데이터 관리: 주로 사용자 인터랙션 및 네트워크 요청 등 동적으로 변하는 데이터를 관리합니다.

예제

javascript
import React, { useState } from 'react';

const CounterComponent = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Current Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

export default CounterComponent;

위 예제에서 CounterComponent는 내부 상태인 count를 관리합니다. 버튼을 클릭할 때마다 상태가 1씩 증가하며, 이에 따라 컴포넌트가 다시 렌더링됩니다.

Props와 State의 차이점 요약

  1. 데이터의 소유권: Props는 부모 컴포넌트가 소유하고 관리하는 데이터이며, State는 해당 컴포넌트가 소유하고 관리하는 데이터입니다.
  2. 수정 가능성: Props는 읽기 전용이지만, State는 컴포넌트 내에서 수정 가능합니다.
  3. 목적: Props는 주로 부모 컴포넌트에서 자식 컴포넌트로 데이터나 함수를 전달하기 위해 사용되며, State는 컴포넌트 내부의 동적 데이터를 관리하기 위해 사용됩니다.

데이터 흐름 이해

React에서의 데이터 흐름은 주로 단일 방향으로 이루어집니다. Props를 통해 부모에서 자식으로 데이터가 전달되고, 상태 변화는 컴포넌트 내부에서 관리됩니다. 이런 구조 덕분에 데이터 흐름을 예측하고 디버깅할 수 있는 강력한 장점을 갖추게 됩니다.

결론

React에서 Props와 State는 중요하면서도 구분되는 두 개념입니다. Props는 컴포넌트 간의 데이터 전달을, State는 컴포넌트 내부의 상태 관리를 담당합니다. 두 개념의 차이를 이해하고 적절히 사용하는 것은 React 애플리케이션 개발에 매우 중요합니다. 이러한 차이점을 명확히 이해하면 더 깨끗하고 유지 보수하기 쉬운 코드를 작성할 수 있습니다.