React State vs Props

안녕하세요! 오늘은 React에서 중요한 개념인 State와 Props의 차이점에 대해 알아보겠습니다. State와 Props는 모두 React 컴포넌트에서 데이터를 관리하고 전달하는 데 사용되지만, 그 용도와 사용 방법에서 중요한 차이가 있습니다.

State vs Props

1. State

정의

State는 컴포넌트 내부에서 관리되는 동적인 데이터입니다. State는 컴포넌트의 상태를 나타내며, 시간이 지남에 따라 변할 수 있습니다. 상태가 변경되면 컴포넌트는 다시 렌더링됩니다.

특징

• 컴포넌트 내부에서 관리: State는 해당 컴포넌트 내부에서만 관리되고 사용됩니다.
• 변경 가능: State는 시간이 지남에 따라 변경될 수 있습니다.
• 초기화: State는 컴포넌트가 생성될 때 초기화됩니다.
• 재렌더링: State가 변경되면 컴포넌트가 다시 렌더링됩니다.

사용 예제

import React, { useState } from 'react';

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

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

위 예제에서 count는 State로, 버튼을 클릭할 때마다 증가합니다.

2. Props

정의

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. Props는 읽기 전용이며, 자식 컴포넌트는 전달된 Props를 수정할 수 없습니다.

특징

• 부모 컴포넌트에서 전달: Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다.
• 읽기 전용: 자식 컴포넌트는 Props를 수정할 수 없습니다.
• 재사용성: Props를 사용하여 컴포넌트의 재사용성을 높일 수 있습니다.
• 데이터 전달: Props는 컴포넌트 간에 데이터를 전달하는 데 사용됩니다.

사용 예제

import React from 'react';

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

function App() {
    return (
        <div>
            <Greeting name="Alice" />
            <Greeting name="Bob" />
        </div>
    );
}

위 예제에서 name은 Props로, 부모 컴포넌트(App)가 자식 컴포넌트(Greeting)에 전달하는 데이터입니다.

3. State와 Props의 차이점

특성	State	Props
정의	컴포넌트 내부에서 관리되는 동적인 데이터	부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
변경 가능성	변경 가능	읽기 전용
초기화	컴포넌트가 생성될 때 초기화	부모 컴포넌트에 의해 설정
사용 범위	컴포넌트 내부에서만 사용	컴포넌트 간에 데이터 전달
목적	컴포넌트의 상태 관리	컴포넌트 간 데이터 전달 및 설정

결론

State와 Props는 React에서 컴포넌트 간의 데이터 관리와 전달에 중요한 역할을 합니다. State는 컴포넌트의 내부 상태를 관리하는 데 사용되며, Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 데 사용됩니다. 이 두 가지 개념을 잘 이해하고 활용하면 React 애플리케이션을 더욱 효율적으로 개발할 수 있습니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.