[Day107] React란? -2

Validator·2023년 11월 20일

React의 컴포넌트(Component) 개념

컴포넌트란 무엇인가

컴포넌트는 React 애플리케이션을 구성하는 기본 단위이다. 이들은 UI의 독립적인, 재사용 가능한 부분으로 간주되며, 각 컴포넌트는 자체적인 구조, 동작, 스타일을 가진다. React에서 컴포넌트는 크게 두 종류로 나뉜다: 함수형 컴포넌트와 클래스형 컴포넌트

컴포넌트의 탄생 배경

재사용성: 컴포넌트는 재사용 가능하도록 설계되었으며, 이를 통해 개발자는 효율적으로 코드를 작성할 수 있다.
유지 관리의 용이성: 애플리케이션의 UI를 작고 독립적인 단위로 분리함으로써, 각 부분의 유지 및 관리가 용이해진다.
모듈성: 컴포넌트를 사용함으로써 애플리케이션의 모듈성이 향상되며, 대규모 프로젝트의 복잡성을 줄일 수 있다.

컴포넌트의 사용 방법

함수형 컴포넌트: JavaScript 함수로 컴포넌트를 정의한다. React 16.8 이후부터는 Hooks를 사용하여 상태 관리 및 부수 효과(side-effects) 처리가 가능하다.
클래스형 컴포넌트: ES6 클래스를 사용하여 정의된다. 생명주기 메소드를 포함하며, 보다 복잡한 상태 관리가 가능하다.
Props (속성): Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용된다. Props는 읽기 전용이며, 자식 컴포넌트에서 수정할 수 없다.
State (상태): 컴포넌트의 상태를 관리하는 데이터이며, 이는 변경 가능하다. 상태 변경은 컴포넌트의 재렌더링을 유발한다.

실제 React 컴포넌트 예시

간단한 'Hello, World!' 메시지를 출력하는 함수형 컴포넌트의 예시를 살펴보자:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

이 컴포넌트는 HelloWorld라는 함수로 정의되며, JSX를 사용하여 <h1> 태그 안에 'Hello, World!' 텍스트를 렌더링한다.

React 컴포넌트의 심화 사용

컴포넌트의 심화 사용은 다음과 같은 개념을 포함한다:
1. 컴포넌트 생명주기: 클래스형 컴포넌트에서 중요한 역할을 한다. componentDidMount, componentDidUpdate, componentWillUnmount 등의 메소드를 통해 컴포넌트의 생명주기에 따른 동작을 정의할 수 있다.
2. 컴포넌트 상태 관리: Hooks(useState, useEffect 등)를 사용하여 함수형 컴포넌트에서 상태 관리를 할 수 있다.
3. 컴포넌트 간 데이터 전달: Props를 통해 부모 컴포넌트로부터 데이터를 자식 컴포넌트로 전달할 수 있다. Context API를 사용하여 깊은 컴포넌트 트리에 데이터를 전달하는 것도 가능하다.

React 컴포넌트의

컴포넌트 기능

컴포넌트 생명주기의 깊은 이해: 클래스 컴포넌트의 생명주기 메소드를 사용하여 컴포넌트가 마운트, 업데이트, 언마운트 될 때 수행해야 할 작업을 정의한다.
Hooks의 고급 사용: useState, useEffect, useContext, useReducer, useCallback, useMemo와 같은 Hooks를 사용하여 함수형 컴포넌트에서 복잡한 상태 관리와 부수 효과를 처리한다.
Context API: 전역 상태 관리를 위해 사용되며, 많은 수의 중첩된 컴포넌트에 걸쳐 props를 전달하는 것을 방지한다.
고차 컴포넌트 (Higher-Order Components, HOCs): 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수로, 로직 재사용을 위해 사용된다.

React 컴포넌트 예시: To-Do 리스트

import React, { useState } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  const addTask = () => {
    if (newTask) {
      setTasks([...tasks, newTask]);
      setNewTask("");
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
      />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}