[DevCamp] 클래스형 컴포넌트와 함수형 컴포넌트

동건·2025년 4월 8일

DevCamp

목록 보기

43/85

☘️ React에서 자주 쓰이는 컴포넌트 방식과 문법들

리액트를 공부하면서 가장 많이 마주치는 키워드 중 하나는 클래스형 컴포넌트와 함수형 컴포넌트다.
여기에 더해 state, 구조 분해 할당, 데이터 반복 처리도
프로젝트를 구성할 때 굉장히 많이 사용되는 개념이다.

오늘은 이 네가지 개념에 대해 학습을 하였다.

클래스형 컴포넌트와 함수형 컴포넌트

🧱 클래스형 컴포넌트

React에서 초창기에는 클래스형 컴포넌트가 기본이었다.
React.Component를 상속받아서 render() 메서드 안에서 JSX를 반환한다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello, 클래스형 컴포넌트!</h1>;
  }
}

클래스형 컴포넌트는 state나 라이프사이클 메서드 등을 사용할 수 있는 장점이 있지만,
코드가 길고 복잡한 단점이 있었다.

🌿 함수형 컴포넌트

이후 React에 Hooks가 도입되면서 함수형 컴포넌트에서도 state, useEffect 같은 기능을 사용할 수 있게 되었다. 덕분에 더 간결하고 직관적인 코드 작성을 할 수 있다.

import React from 'react';

function MyComponent() {
  return <h1>Hello, 함수형 컴포넌트!</h1>;
}

Hooks를 사용한 함수형 컴포넌트 예시:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

state 사용하기

state는 컴포넌트의 상태를 저장하고 관리하는 객체다.
상태가 바뀌면 컴포넌트는 자동으로 리렌더링된다.

함수형 컴포넌트에서는 useState 훅을 사용한다.

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(true);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? '켜짐' : '꺼짐'}
    </button>
  );
}

위 예제처럼 버튼 클릭 시 isOn 상태가 바뀌면서 화면도 같이 변경된다.

구조 분해 할당 이해

React 코드에서 자주 쓰이는 구조 분해 할당은 배열이나 객체에서 값을 간편하게 꺼낼 수 있게 도와준다.

배열 구조 분해

const [count, setCount] = useState(0);
// count는 상태 값, setCount는 상태를 변경하는 함수

객체 구조 분해

const person = { name: 'Tom', age: 28 };
const { name, age } = person;
console.log(name); // 'Tom'

JSX 안에서도 props를 구조 분해해서 사용할 수 있다:

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

데이터 반복 처리하기

리스트 형태의 데이터를 화면에 렌더링하려면 map()을 자주 사용한다.

const fruits = ['🍎', '🍌', '🍇'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}