6. React의 기본 개념 - 4

Props와 State의 활용

Props와 State의 개념

React에서 Props(속성)와 State(상태)는 컴포넌트의 데이터를 관리하는 데 중요한 역할을 합니다.

• Props: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터입니다. Props를 사용하여 컴포넌트 간에 데이터를 전달하고 외부에서 컴포넌트를 제어할 수 있습니다.
• State: 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트의 동적인 동작과 상호작용을 구현할 때 사용됩니다. State를 변경하면 React는 자동으로 UI를 업데이트합니다.

Props의 활용

Props는 컴포넌트 간의 데이터 전달에 사용되며, 다음과 같이 활용됩니다.

Props 전달하기: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent name="John" age={30} />;
};

export default ParentComponent;

 

Props 사용하기: 자식 컴포넌트에서 Props를 사용하여 데이터를 화면에 출력하거나 조작합니다.

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
};

export default ChildComponent;

State의 활용

State는 컴포넌트 내부에서 관리되는 데이터로, 다음과 같이 활용됩니다.

State 초기화하기: 컴포넌트의 초기 상태를 설정합니다.

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

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

export default MyComponent;

 

State 변경하기: setState 함수를 사용하여 State를 변경하고, 변경된 State를 화면에 반영합니다.

import React, { useState } from 'react';

const MyComponent = () => {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>Typed text: {text}</p>
    </div>
  );
};

export default MyComponent;

Props와 State의 차이

• Props: 부모 컴포넌트에서 전달되며 읽기 전용입니다. 한 번 설정된 Props는 변경할 수 없습니다.
• State: 컴포넌트 내부에서 관리되며 동적인 데이터를 표현하고 관리합니다. State는 변경 가능하며, setState 함수를 통해 업데이트할 수 있습니다.

Props와 State는 React 애플리케이션에서 데이터 관리를 위한 핵심 개념이며, 올바르게 활용하면 컴포넌트 기반의 유연하고 동적인 UI를 구축할 수 있습니다.