[React] props와 state

리액트에서 컴포넌트는 State와 Props를 통해 데이터를 관리하고 전달합니다.

이 두 가지 개념은 리액트 애플리케이션의 핵심적인 부분으로, 컴포넌트 간 데이터 흐름을 제어하고 UI의 동적 변화를 처리하는 데 중요한 역할을 합니다. 

 

1. State란 무엇인가?

State는 컴포넌트 내에서 동적인 데이터를 관리하는 객체입니다.

사용자가 상호작용하거나 데이터가 변경되면 상태가 업데이트되고, 그에 따라 컴포넌트가 리렌더링되어 UI가 자동으로 업데이트됩니다.

• 상태는 컴포넌트 내에서만 관리됩니다. 다른 컴포넌트에서 직접 접근하거나 수정할 수 없습니다.
• 상태는 주로 사용자 입력, 서버 응답 등으로 변하는 데이터를 다룹니다. 예를 들어, 입력한 텍스트나 버튼 클릭 횟수 등이 이에 해당합니다.

import React, { useState } from 'react';

function Counter() {
  // useState를 사용해 state 초기화
  const [count, setCount] = useState(0);

  // 버튼 클릭 시 count 상태 업데이트
  const increment = () => {
    setCount(count + 1);
  };

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

export default Counter;

 

• useState는 리액트 훅으로, State 변수와 해당 변수 업데이트 함수를 반환합니다. 
• setCount는 상태를 업데이트하는 함수입니다.
• 상태가 변경되면 컴포넌트가 자동으로 리렌더링됩니다.

2. Props란 무엇인가?

Props(프로퍼티)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. Props는 읽기 전용이며, 자식 컴포넌트에서 직접 수정할 수 없습니다. 데이터 전달 방식은 HTML 속성과 유사하지만, 값으로 변수, 함수 등 JavaScript 표현식을 넘길 수 있다는 점에서 다릅니다.

• Props는 외부 데이터를 받아서 표시하는 역할을 합니다.
• 부모 컴포넌트에서 자식 컴포넌트로 값 전달은 불변(immutable) 방식입니다.

import React from 'react';

// 자식 컴포넌트
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 부모 컴포넌트
function App() {
  return <Greeting name="Alice" />;
}

export default App;

 

 

• props는 자식 컴포넌트의 함수 인자로 전달됩니다.
• 부모 컴포넌트에서 name="Alice"와 같이 데이터를 전달하면, 자식 컴포넌트에서 props.name으로 그 값을 사용할 수 있습니다. 

import React from 'react';

// 자식 컴포넌트
function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Age: {props.age}</p>
      <p>Address: {props.address}</p>
    </div>
  );
}

// 부모 컴포넌트
function App() {
  return <Greeting name="Alice" age="13" address="Seoul" />;
}

export default App;

 

• <Greeting>이라는 자식 컴포넌트에 name="Alice" 라는 값을 전달해 주는 것으로, 추가적으로 age="13" address="Seoul" 등의 값을 추가하면 Greeting 내부에서 props.name이 "Alice"를 의미하는 것처럼 props.age는 "13"을 의미하고, props.address는 "Seoul"을 의미합니다. 
• 출력결과
•  

Hello, Alice!
Age: 13
Address: Seoul

 

3. State와 Props의 차이점

 

	State	Props
정의	컴포넌트 내부에서 관리되는 동적인 데이터	부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
변경 가능성	변경 가능 (setState 또는 useState로 업데이트)	변경 불가능 (자식에서 수정할 수 없음)
용도	컴포넌트의 동작에 따라 변화하는 데이터	컴포넌트 간 데이터 전달
관리 위치	컴포넌트 내부에서 관리	부모 컴포넌트에서 관리

 

4. State와 Props를 함께 사용하는 예시

자주 사용되는 패턴은 State로 데이터를 관리하고, Props로 자식 컴포넌트로 전달하는 방식입니다. 예를 들어, 부모 컴포넌트에서 상태를 관리하고, 자식 컴포넌트에서 그 값을 사용하며, 자식에서 이벤트가 발생하면 부모로 데이터를 전달하는 구조입니다.

 

import React, { useState } from 'react';

function ChildComponent(props) {
  return <button onClick={props.onClick}>Click me</button>;
}

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={incrementCount} />
    </div>
  );
}

export default ParentComponent;

 

• State: ParentComponent에서 count를 관리합니다.
• Props: ParentComponent는 ChildComponent에게 onClick 함수(상태 업데이트 함수)를 전달합니다.
• ChildComponent는 부모로부터 받은 onClick 함수를 버튼 클릭 시 실행합니다.

5. 정리

• State는 컴포넌트 내부에서 관리되는 동적인 데이터로, 상태가 변경되면 UI가 자동으로 업데이트됩니다.
• Props는 부모에서 자식 컴포넌트로 데이터를 전달하는 역할을 하며, 자식 컴포넌트에서는 읽기 전용으로 사용됩니다.