state와 props

React에서 state와 props는 둘 다 컴포넌트의 데이터를 관리하는 데 사용됩니다.

state

State는 컴포넌트 내에서 관리되는 데이터입니다. State는 컴포넌트가 렌더링될 때마다 업데이트될 수 있습니다. State를 변경하면 컴포넌트가 다시 렌더링됩니다. State는 클래스형 컴포넌트에서 사용됩니다.

state 예시

import React, { useState } from 'react';

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

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

export default Counter;

이 컴포넌트는 count라는 state를 가지고 있습니다.

props

Props는 컴포넌트 간에 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이며, 컴포넌트 내에서 변경할 수 없습니다. Props는 함수형 컴포넌트에서 사용됩니다.

props 예시

import React from 'react';

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

export default Greeting;

이 컴포넌트는 name이라는 props를 받아서 사용합니다. 이 컴포넌트를 사용하려면 다음과 같이 작성할 수 있습니다.

import React from 'react';
import Greeting from './Greeting';

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

export default App;

이 컴포넌트는 Greeting 컴포넌트를 두 번 렌더링합니다. 첫 번째 Greeting 컴포넌트는 name이 "Alice"이고, 두 번째 Greeting 컴포넌트는 name이 "Bob"입니다. Greeting 컴포넌트는 props로 전달받은 name을 사용하여 "Hello, {name}!"을 렌더링합니다.