React 기본 문법ー상태 (State) & 속성 (Props)

React 기본 문법 중 "상태 (State) & 속성 (Props)"에 대해 알아보겠습니다.

1. React 기본 문법
   • 상태 (State) & 속성 (Props)

상태 (State)

React 컴포넌트에서 변경될 수 있는 데이터를 관리하는 방법 중 하나가 상태(State)입니다. 클래스형 컴포넌트에서는 this.state를 통해 상태를 정의하고, this.setState 메서드를 통해 상태를 업데이트합니다.

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

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

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

함수형 컴포넌트에서는 useState Hook을 사용하여 상태를 관리합니다.

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

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

속성 (Props)

속성(Props)은 부모 컴포넌트로부터 자식 컴포넌트로 값을 전달할 때 사용합니다. Props는 읽기 전용이므로 함수나 클래스 내부에서 변경할 수 없습니다.

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

function App() {
   return (
     <div>
       <Welcome name="Sara" />
       <Welcome name="Cahal" />
       <Welcome name="Edite" />
     </div>
   );
}

ReactDOM.render(
   <App />,
   document.getElementById('root')
);

위 예시에서 App 컴포넌트는 각각 다른 이름을 가진 세 개의 Welcome 컴포넌트를 렌더링합니다. 이때 각각의 이름은 props를 통해 Welcome 컴포넌트에 전달됩니다.

다음 주제로 넘어가도록 하겠습니다.