컴포넌트

리액트에서 컴포넌트는 UI의 구성 요소로, 리액트 애플리케이션을 구성하는 핵심적인 단위입니다. 컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 애플리케이션의 화면을 렌더링하고 상호 작용을 처리하는 역할을 합니다. 컴포넌트는 두가지 주요 형태로 나뉩니다. 함수형 컴포넌트와 클래스형 컴포넌트입니다. 리액트 16.8 이후로 함수형 컴포넌트가 더 많이 사용됩니다.

---

함수형 컴포넌트의 특징

함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX를 반환합니다. 함수형 컴포넌트에서는 props를 통해 외부 데이터를 전달 받고, state와 기타 리액트 기능은 훅을 사용하여 관리합니다.

import React from 'react';

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

export default MyComponent;

 

1. Props

props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방법입니다. props는 읽기 전용이며, 자식 컴포넌트에서는 수정할 수 없습니다. 함수형 컴포넌트에서 props는 함수의 인수로 전달됩니다.

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

const App = () => {
  return <Greeting name="Alice" />;
};

 

2. State

리액트 컴포넌트의 상태는 useState 훅을 사용하여 관리됩니다. useState는 컴포넌트 내에서 동적인 값을 저장하고 변경할 수 있게 해줍니다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);  // 상태 업데이트
  };

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

export default Counter;

3. useEffect

리액트에서 useEffect 혹은 컴포넌트가 렌더링된 후에 발생하는 side effect(ex. 데이터 가죠오기, 타이머 설정, 등)를 처리하는 데 사용됩니다. useEffect는 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 실행될 수 있습니다.

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // 컴포넌트 언마운트 시 타이머를 정리하는 함수 반환
    return () => clearInterval(timer);
  }, []); // 빈 배열은 컴포넌트가 마운트될 때 한 번만 실행되게 합니다.

  return <h1>Seconds: {seconds}</h1>;
};

export default Timer;

 

4. 이벤트 처리

리액트에서 이벤트는 HTML 이벤트와 유사하게 처리되지만, JSX 문법에 맞춰 소문자로 이벤트 핸들러를 전달합니다. 이벤트 핸들러는 함수형 컴포넌트 내에서 정의된 함수로 전달됩니다. 이벤트 핸들러는 함수형 컴포넌트 내에서 정의된 함수로 전달됩니다.

const Button = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
};