리액트의 state vs props

REACT

해당 포스팅에서는 REACT의 state vs props에 대해 다룹니다.

이번 포스팅 목차

• REACT의 state vs props
  

리액트의 state vs props

state와 props 컴포넌트 간 데이터 관리의 두 가지 주요 개념입니다. 이 두 개념은 리액트 애플리케이션의 구조와 데이터 흐름을 이해하는 데 있어 핵심적인 역할을 합니다. state 와 props 의 차이점, 사용 방법, 그리고 각 개념의 특성을 자세히 설명하겠습니다.

1. Props (Properties)

Props 는 컴포넌트 간에 데이터를 전달하기 위한 읽기 전용 속성입니다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용되며, 자식 컴포넌트는 이를 받아 렌더링합니다. Props는 변경할 수 없으며 컴포넌트 외부에서 전달됩니다.

주요 특징

• 읽기 전용: 자식 컴포넌트는 props를 수정할 수 없습니다.

• 부모 컴포넌트에서 전달: 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달합니다.

• 동적 데이터 전달: 부모 컴포넌트의 상태나 props가 변경되면 자식 컴포넌트에 전달된 props도 업데이트됩니다.

import React from 'react';

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

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

export default App;

2. State

State 는 컴포넌트 내부에서 관리되는 동적인 데이터 입니다. 컴포넌트의 상태는 컴포넌트 자체에서 초기화되고 변경될 수 있으며, 상태가 변경되면 컴포넌트는 자동으로 다시 렌더링됩니다. State는 변경 가능한 데이터 로, 컴포넌트의 동작과 렌더링을 제어합니다.

주요 특징

• 내부 관리: 상태는 컴포넌트 자체에서 관리되고 변경될 수 있습니다.

• 동적 데이터: 상태는 사용자 상호작용, 네트워크 요청 등의 결과로 변경될 수 있습니다.

• 리렌더링: 상태가 변경되면 컴포넌트는 자동으로 다시 렌더링됩니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

State vs Props: 차이점

데이터 소유권 및 변경 가능성

• Props: 부모 컴포넌트가 소유하고 관리하며, 자식 컴포넌트에서는 읽기 전용 입니다.

• State: 컴포넌트 자체가 소유하고 관리하며, 컴포넌트 내부에서 변경 가능 합니다.

용도

• Props: 컴포넌트 간 데이터 전달 및 구성 을 위해 사용됩니다.

• State: 컴포넌트의 동적 데이터 를 관리하고, 사용자 상호작용 이나 네트워크 요청 등의 결과를 반영합니다.

리렌더링 트리거

• Props: 부모 컴포넌트의 상태나 props가 변경되어 자식 컴포넌트에 새로운 props가 전달되면 리렌더링됩니다.

• State: 컴포넌트의 상태가 변경되면 해당 컴포넌트는 자동으로 리렌더링됩니다.

결합 사용 예시

종종 props 와 state 는 함께 사용되어 컴포넌트 간 데이터를 효율적으로 관리합니다. 부모 컴포넌트는 상태를 관리하고, 이 상태를 자식 컴포넌트에 props로 전달하여 자식 컴포넌트가 이를 렌더링합니다.

import React, { useState } from 'react';

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent!');

  return (
    <div>
      <ChildComponent message={message} />
      <button onClick={() => setMessage('Message Updated!')}>Update Message</button>
    </div>
  );
}

export default ParentComponent;

마무리

리액트의 state 와 props 는 각각 내부 상태 관리 와 컴포넌트 간 데이터 전달 을 담당하는 중요한 개념입니다. Props 는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터 이며, State 는 컴포넌트 내부에서 관리되고 변경 될 수 있는 동적 데이터 입니다. 이 두 개념을 이해하고 적절히 활용하면 리액트 애플리케이션의 데이터 흐름과 구조 를 효율적으로 관리할 수 있습니다.