props와 state

1️⃣ Props (Properties)

Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식이다.

• 단방향 데이터 흐름을 가진다.
• 부모 컴포넌트에서 수정 가능하지만, 자식 컴포넌트에서는 읽기만 가능하다.
• 함수의 매개변수와 유사한 역할을 한다.

1️⃣ -2️⃣ 예시

// 상위 컴포넌트 (App.js)
import React from 'react';
import ChildComponent from './ChildComponent';

function App() {
  const name = "홍길동";
  const location = "서시";

  return (
    <div className="App">
      <ChildComponent name={name} location={location} />
    </div>
  );
}

export default App;

// 하위 컴포넌트 (ChildComponent.js)
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>{props.name}은 {props.location}에 거주합니다.</p>
    </div>
  );
}

export default ChildComponent;

1. 상위 컴포넌트(App.js)에서 전달하고자 하는 데이터를 정의한다.
2. 하위 컴포넌트를 렌더링할 때, 속성 형태로 데이터를 전달한다.
3. 하위 컴포넌트(ChildComponent.js)에서는 props 객체를 통해 전달받은 데이터에 접근할 수 있다.
4. props의 값은 props.name, props.location과 같이 사용할 수 있다.

2️⃣ State

State는 컴포넌트 내부에서 관리되는 변경 가능한 데이터이다.

• 컴포넌트의 현재 상태를 나타낸다.
• 오직 해당 컴포넌트 내에서만 변경이 가능하다.
• state가 변경되면 React는 해당 컴포넌트를 리렌더링한다.

2️⃣-1️⃣ 예시

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>
  );
}

• 버튼을 클릭하면 setCount를 통해서 상태 변화가 관리된다.

2️⃣-2️⃣ 예시

import React, { useState } from 'react';

function InputComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

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

1. handleChange 함수는 input 엘리먼트의 onChange 이벤트가 발생할 때 호출된다. 즉, inputValue가 변경될 때마다 input의 값도 업데이트됩니다. 이것이 양방향 바인딩이다.

• 사용자가 input 필드에 값을 입력하면 onChange 이벤트가 발생하고, 그때 handleChange 함수가 호출되어 inputValue를 변경한다. 다시 말해, input 필드와 inputValue가 서로 연결되어 있어, inputValue가 변경되면 input 값도 자동으로 업데이트된다.

3️⃣ 주요 차이점

1. 출처

   props - 부모 컴포넌트로부터 받는 데이터

   state - 컴포넌트 내부에서 관리되는 데이터

2. 변경 가능성

   props - 읽기 전용

   state - 컴포넌트 내에서 변경 가능

3. 용도

   props - 컴포넌트 간 데이터 전달에 사용

   state - 컴포넌트의 동적인 데이터를 관리하는 데 사용