React 컴포넌트 (Component)

서론

2024.12.21 - [Web framework/React] - React 시작하기

React 시작하기

이전 글에서 React를 소개하고 설치하는 방법 그리고 수정과 배포를 설명하였습니다. 이번 글에서는 React의 컴포넌트에 대해서 학습하고 정리하고자 합니다.

 

React 컴포넌트(Component)란?

React 컴포넌트는 사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드 블록입니다.

 

React는 사용자 정의 태그를 만드는 기술입니다. 그럼 어떻게 사용자 정의 태그를 만드는가?

 

바로 컴포넌트를 사용해서 사용자 정의 태그를 만듭니다.

 

컴포넌트의 종류

React 컴포넌트는 크게 함수형 컴포넌트(Function Component)와 클래스형 컴포넌트(Class Component)로 나뉩니다.

 

함수형 컴포넌트(Function Component)

함수형 컴포넌트의 특징은 다음과 같습니다.

• Javascript 함수로 정의됩니다.
• React Hooks(useState, useEffect 등)를 사용할 수 있습니다.
• 최근 React 개발에서는 함수형 컴포넌트를 많이 사용합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

 

클래스형 컴포넌트(Class Component)

클래스형 컴포넌트의 특징은 다음과 같습니다.

• ES6 클래스 문법을 사용합니다.
• this.state를 사용하여 상태를 관리합니다.
• React 16.8 이후로는 잘 사용되지 않습니다.

import React, { Component } from 'react';

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

  render() {
    return (
      <div>
        <h1>카운터: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          증가
        </button>
      </div>
    );
  }
}

export default Counter;

 

컴포넌트는 주로 사용되는 함수형 컴포넌트로 공부하고자 합니다.

 

컴포넌트 시작

만약 코드가 위와 같이 작성되어 있는 것이 아닌 <header>, <nav>, <article> 태그 코드가 수 만 줄의 코드라고 가정하면 해당 코드는 알아보기 매우 어려울 것 입니다. 이럴 때 코드를 정리할 때 서로 연관된 것을 모으는 것을 그룹핑이라 합니다.

 

사용자 정의 태그를 만들고 싶을 때는 함수를 정의하면 됩니다. 사용자 정의할 태그와 똑같은 이름의 함수를 만들면 되는데 단 함수명은 반드시 대문자로 시작해야 합니다.

function Header() {
    return <header>
        <h1><a href="/">React</a></h1>
    </header>
}

이런 식으로 반환 값을 붙여 넣으면 됩니다. 그러고 나서 App() 함수 안에 <Header></Header>를 작성하면 기존에 작성한 코드와 똑같이 구현되는 것을 볼 수 있습니다. 

 

App() 함수 안에 <Header></Header>를 3번 입력하면 화면에 React가 세 번 출력됩니다. 그리고 사용자 정의 함수에서 React를 Web으로 변경하면 화면에서는 한 번에 Web으로 변경된 것을 볼 수 있습니다.

 

지금까지 사용자 정의 함수라 불렀지만 React에서는 이를 컴포넌트라 부릅니다.

 

모든 태그를 컴포넌트로 변경하면 메인 함수에서는 중복되는 부분이 없어지고 태그명을 보고 동작을 예측할 수 있습니다.