state vs props

State vs Props

소개

React에서 컴포넌트 간의 데이터 흐름을 이해하는 것은 매우 중요합니다. React에는 두 가지 주요 데이터 유형이 있으며, 이들은 state와 props입니다. 이 두 개념은 서로 다른 목적과 사용 사례를 가지고 있습니다.

State

정의

state는 컴포넌트 내부에서 관리되는 데이터입니다. 컴포넌트는 상태를 생성하고, 상태를 변경할 수 있으며, 상태가 변경될 때마다 리렌더링됩니다. 상태는 컴포넌트 내부에서만 접근 및 수정이 가능합니다.

예제

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 상태를 생성합니다.
  const [count, setCount] = useState(0);

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

위 예제에서 count는 상태입니다. 버튼을 클릭할 때마다 setCount 함수를 호출하여 count 상태를 업데이트하고, React는 컴포넌트를 다시 렌더링합니다.

Props

정의

props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용이며 자식 컴포넌트는 props를 변경할 수 없습니다. props는 컴포넌트 간의 데이터 전달을 위해 사용됩니다.

예제

import React from 'react';

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

function App() {
  return (
    <div>
      <Greeting name="철수" />
      <Greeting name="영희" />
    </div>
  );
}

위 예제에서 name은 props로 Greeting 컴포넌트에 전달됩니다. Greeting 컴포넌트는 props를 사용하여 인사말을 표시합니다.

주요 차이점

1. 변경 가능성: state는 컴포넌트 내에서 변경될 수 있지만, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 동안 변경할 수 없습니다.
2. 초기화 및 관리: state는 컴포넌트 내부에서 초기화되고 관리되며, props는 부모 컴포넌트에서 초기화되고 자식 컴포넌트로 전달됩니다.
3. 목적: state는 컴포넌트의 동적 데이터 관리를 위해 사용되며, props는 컴포넌트 간의 데이터 전달을 위해 사용됩니다.
4. 재렌더링: state가 변경되면 컴포넌트는 다시 렌더링되지만, props가 변경되면 해당 props를 받는 자식 컴포넌트가 다시 렌더링됩니다.

결론

React에서 state와 props는 각각 다른 용도로 사용되며, 이를 올바르게 이해하고 사용하는 것이 중요합니다. state는 컴포넌트의 동적 데이터를 관리하는 데 사용되고, props는 컴포넌트 간의 데이터 전달에 사용됩니다. 이 두 가지 개념을 잘 이해하면 React 애플리케이션을 더 효과적으로 설계하고 구현할 수 있습니다.

다음시간에 계속…