[코벤져스 스터디-6일차] React State & Props

Component

자체적으로 독립적인 기능과 UI를 가지며 재사용 가능한 단위

Props

부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터

예시

import React from 'react';

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

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

위의 예시를 보면 Greeting 컴포넌트는 name 속성을 통해 "John" 값을 전달받는다. 이 값은 props.name을 통해 읽을 수 있으며 결과는 "Hello, John!"이 된다.

States

컴포넌트의 데이터를 관리하고, 이 데이터에 기반하여 UI를 업데이트하는 데 사용

예시

import React, { Component } from 'react';

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