[REACT]리액트에서 컴포넌트(component)란?

리액트에서는 컴포넌트라는 개념이 매우 중요합니다. 컴포넌트에 대해서 확인해보고 이와 더불어 state와 props에 대한 내용도 확인해 봅시다.

React 컴포넌트란?

React에서 컴포넌트는 UI를 구성하는 가장 작은 단위로, 독립적이고 재사용 가능한 코드 조각입니다. 이 컴포넌트는 각자 자신의 상태를 관리할 수 있고, 서로 데이터를 주고받으며 동작합니다. 이 컴포넌트는 다음과 같은 두 가지 형태로 작성할 수 있습니다:

함수형 컴포넌트 (Functional Components): 함수 형태로 정의된 컴포넌트.
클래스형 컴포넌트 (Class Components): 클래스를 이용해 정의된 컴포넌트. (최근에는 함수형 컴포넌트와 Hooks를 더 많이 사용함)

함수형 컴포넌트의 예시

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

컴포넌트에서 STATE

State는 컴포넌트 내에서 변경 가능한 데이터를 관리하는 데 사용됩니다. 예를 들어, 사용자 입력, 버튼 클릭 등으로 인해 변할 수 있는 값을 다룰 때 useState 훅을 사용합니다. 쉽게 이야기하면 변수와 비슷한 개념이라고 생각하면 쉬울 거 같습니다.

import React, { useState } from 'react';

const Counter = () => {
  // useState로 count 상태 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      {/* 버튼 클릭 시 count 상태 변경 */}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

useState는 현재 상태(count)와 상태를 업데이트하는 함수(setCount)를 반환합니다.
위 예시에서 버튼을 클릭할 때마다 count 값이 1씩 증가하고, 그 값이 화면에 즉시 반영됩니다.

컴포넌트에서 Props

Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. Props는 읽기 전용이므로 자식 컴포넌트에서 이를 직접 변경할 수 없습니다.

// 자식 컴포넌트
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// 부모 컴포넌트
const App = () => {
  return (
    <div>
      {/* Props로 name 값을 자식 컴포넌트에 전달 */}
      <Greeting name="React" />
    </div>
  );
};

export default App;

Greeting 컴포넌트는 name이라는 props를 받으며, 이를 통해 인사말을 출력합니다.
부모 컴포넌트인 App은 Greeting에 name="React"라는 값으로 props를 전달하고, 자식 컴포넌트는 이를 출력할 뿐 수정할 수 없습니다.

State와 Props의 차이점

State는 컴포넌트 내에서 관리되는 데이터로, 주로 사용자 상호작용을 처리할 때 사용됩니다.
Props는 부모에서 자식으로 전달되는 읽기 전용 데이터로, 컴포넌트 간 데이터 흐름을 관리하는 데 사용됩니다.

State와 Props를 함께 사용하는 예시

import React, { useState } from 'react';

// 자식 컴포넌트
const DisplayCount = ({ count }) => {
  return <h2>Current Count: {count}</h2>;
};

// 부모 컴포넌트
const CounterApp = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter</h1>
      {/* State를 자식 컴포넌트로 전달 */}
      <DisplayCount count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default CounterApp;

DJ pupm this party