React Props와 State를 통한 데이터 관리

React는 컴포넌트 기반 라이브러리로, 데이터를 전달하는 두 가지 주요 방법인 Props와 State가 있습니다.

 

Props (Properties)

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. props는 읽기 전용이기 때문에, 전달받은 자자식 컴포넌트는 props를 수정할 수 없습니다. (값을 수정하고 싶으면, 부모 컴포넌트에서 state를 변경시켜줘야 합니다.)

 

props 기본 사용법

부모 컴포넌트

function ParentComponent() {
  const name = "yeo";
  
  return <ChildComponent name={name} />
}

 

자식 컴포넌트

function ChildComponent(props) {
  return <div>Hello, {props.name}!</div>
}

 

 

여러개의 props

부모 컴포넌트

function ParentComponent() {
  const name = "yeo";
  const color = "red";
  
  return <ChildComponent name={name} color={color} />
}

 

자식 컴포넌트 - 방법1)

function ChildComponent(props) {
  return <div style={{color: props.color}}>Hello, {props.name}!</div>
}

 

 

자식 컴포넌트 - 방법2)

function ChildComponent({color, name}) {
  return <div style={{color}}>Hello, {name}!</div>
}

 

props 기본값 설정: defaultProps

function ChildComponent({color, name}) {
  return <div style={{color}}>Hello, {name}!</div>
}

ChildComponent.defaultProps = {
	name: '익명'
}

 

State

state는 컴포넌트 내부에서 관리되는 데이터입니다. state는 컴포넌트의 상태를 나타내며, 변경될 수 있습니다.

state가 변경되면 해당 컴포넌트와 하위 컴포넌트가 리렌더링됩니다.

import React, { useState } from 'react';

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

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

export default CounterComponent;

함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

위 예제에서 CounterComponent는 userState 훅을 사용하여 count라는 상태를 정의합니다. 버튼을 클릭할 때마다 setCount 함수를 호출하여 상태를 업데이트하고, 컴포넌트는 새로운 상태 값으로 다시 렌더링됩니다.

 

 

참고: Hooks

상태 관리하는 위 예제 코드는 함수형 컴포넌트입니다. 예전엔 함수형 컴포넌트는 상태 관리를 해주지 못했기 때문에 클래스형 컴포넌트를 사용했었습니다. 하지만 React Hooks가 발표되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었습니다. React Hooks에 대한 자세한 설명은 다음 포스팅에서 하겠습니다.