React | Props (속성), State (상태) 에 대해서

---

Props (속성)

• 부모 -> 자식 컴포넌트로 데이터를 전달할 때 사용한다.
• 읽기 전용이며, 자식 컴포넌트에서 수정할 수 없다.

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = "전달할 데이터";
  return <ChildComponent data={data} />;
};

// 자식 컴포넌트
import React from 'react';

const ChildComponent = (props) => {
  return <div>{props.data}</div>;
};

---

State (상태)

• 컴포넌트 내부에서 관리 하는 데이터이다.
• 컴포넌트의 상태가 변화할 때마다 React는 자동으로 랜더링한다.
• State의 초기화는 컴포넌트의 constructor에서 수행한다.
• State 변경 시, State를 직접 수정해서는 안되고, SetState 메소드를 사용하여 변경을 반영한다.
• 클래스형 컴포넌트에서는 this.State로 State에 접근하고, 함수형 컴포넌트에서는 useState 훅을 사용한다.

// 클래스형 컴포넌트에서의 state
import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

// 함수형 컴포넌트에서의 state
import React, { useState } from 'react';

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

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

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