[FE 45] _23.05.22 _ Day 29 (React_State & Props)

State와 Props는 리액트(React)에서 컴포넌트 간 데이터를 전달하고 관리하는 데 사용되는 개념입니다.

**State(상태)**:
- State는 컴포넌트 내에서 관리되는 데이터입니다.
- 컴포넌트 내부에서 `this.state`를 사용하여 선언하고, `this.setState()`를 사용하여 업데이트합니다.
- State의 값이 변경되면 리액트는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다.
- 주로 컴포넌트의 내부 상태를 저장하고, 사용자 상호작용, API 요청 결과 등과 같이 동적으로 변경되는 데이터를 다룰 때 사용됩니다.
- 클래스형 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

import React, { Component } from 'react';

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

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

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

**Props(속성)**:
- Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다.
- 부모 컴포넌트에서 속성 값을 설정하고, 자식 컴포넌트에서는 `props`를 통해 값을 받아옵니다.
- Props는 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없습니다.
- 컴포넌트 간에 데이터를 전달하거나 컴포넌트의 재사용성을 높일 때 사용됩니다.

import React from 'react';

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

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

위의 예시에서 `App` 컴포넌트가 `Greeting` 컴포넌트로 `name` 속성을 전달하고 있습니다. `Greeting` 컴포넌트에서 `props.name`을 통해 전달된 값을 사용하여 화면에 "Hello, John!"을 표시합니다.

State와 Props는 리액트 컴포넌트의 데이터 흐름을 관리하는 데 중요한 역할을 합니다. 

 

State는 컴포넌트 내부에서 관리되는 동적인 데이터이고, Props는 컴포넌트 간에 전달되는 데이터입니다.

 

---

과제는  fe-sprint-react-twittler-state-props !! 과제 포스팅은 따로!

 

---