React.js 컴포넌트(Conponent)의 생성, props, state, 수명주기에 대한 기본적인 사항 알아보기

React 컴포넌트는 React 애플리케이션의 빌딩 블록이다. 이를 통해 개발자는 복잡한 UI를 더 작고 재사용 가능하며 관리하기 쉬운 조각으로 나눌 수 있다. 이 글에서는 기본부터 시작해서 고급 주제로 넘어가면서 React 컴포넌트에 대해 자세히 살펴볼 것이다. 컴포넌트 생성, 컴포넌트 소품, 컴포넌트 상태, 컴포넌트 수명 주기 메서드 등 React 컴포넌트를 시작하기 위해 알아야 할 모든 것을 다룰 것이다.

React 컴포넌트란?

React 컴포넌트는 애플리케이션 전체에서 재사용할 수 있는 UI 조각이다. 컴포넌트는 프로퍼티 형태로 입력을 받고, 자체 내부 상태를 관리하며, 렌더링해야 할 UI에 대한 설명을 반환할 수 있다.

React 컴포넌트는 자바스크립트 함수나 클래스를 사용해 생성된다. 컴포넌트는 사용자의 요구와 사용 중인 React 버전에 따라 함수형 또는 클래스 기반 컴포넌트 중 하나를 선택할 수 있다.

React 컴포넌트 생성하기

간단한 함수형 컴포넌트를 만드는 것부터 시작하겠다. 다음은 이름을 props로 사용하고 인사말을 반환하는 컴포넌트의 예시이다.

import React from 'react';

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

export default Greeting;

이 예제에서 Greeting 컴포넌트는 하나의 props인 'name'를 받아 인사말이 포함된 div를 반환한다. 이 컴포넌트를 임포트하고 이름을 전달하면 애플리케이션 전체에서 사용할 수 있다.

컴포넌트 props (Component props)

프로퍼티는 컴포넌트에 전달되는 입력이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하거나 애플리케이션의 상태에서 컴포넌트로 데이터를 전달하는 데 사용할 수 있다.

다음은 이름과 나이라는 두 개의 프로퍼티를 받는 컴포넌트의 예이다.

import React from 'react';

const User = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
};

export default User;

이 예제에서 User 컴포넌트는 'name'과 'age'라는 두 가지 props를 받는다. 이 컴포넌트는 제목과 단락을 포함하는 div를 반환하여 소품의 값을 표시한다.

컴포넌트 state (Component state)

props는 컴포넌트에 전달되는 입력인 반면, state는 컴포넌트별 데이터를 저장하고 관리하는 데 사용할 수 있는 내부 데이터 저장소이다. props와 달리 state는 컴포넌트가 업데이트할 수 있으므로 사용자 상호작용이나 기타 이벤트에 따라 컴포넌트의 모양을 동적으로 변경할 수 있다.

다음은 state를 사용하여 버튼 클릭 수를 보여주는 컴포넌트의 예이다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

이 예에서 Counter 컴포넌트는 useState 훅을 사용하여 상태를 저장하고 관리한다. count는 0으로 초기화되며 버튼을 클릭할 때마다 업데이트된다. setCount 함수는 상태를 업데이트하는 데 사용된다.

그리고 컴포넌트는 업데이트된 카운트 값으로 다시 렌더링한다.

컴포넌트 수명 주기 메서드 (Component lifecycle methods)

React 컴포넌트에는 생성, 업데이트, 소멸 시기를 결정하는 수명주기가 있다. 컴포넌트 수명 주기의 여러 단계에서 작업을 수행하는 데 사용할 수 있는 몇 가지 수명 주기 메서드가 있다. 이러한 메서드를 사용하면 API에서 데이터 가져오기, 컴포넌트 상태 업데이트, 애니메이션 트리거와 같은 작업을 수행할 수 있다.

다음은 componentDidMount 수명 주기 메서드를 사용하여 API에서 데이터를 가져오는 컴포넌트의 예시이다.

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default DataFetcher;

이 예에서 DataFetcher 컴포넌트는 컴포넌트가 마운트될 때 useEffect 훅을 사용하여 API에서 데이터를 가져온다. 컴포넌트는 데이터를 가져오는 동안 로딩 메시지를 표시하고, 가져온 데이터를 사용할 수 있게 되면 미리 포맷된 문자열로 표시한다.

결론

React 컴포넌트는 React의 기본 개념이며 확장 가능하고 유지보수가 가능한 애플리케이션을 구축하는 데 필수적이다. 이 글에서는 컴포넌트 생성, 컴포넌트 소품, 컴포넌트 상태, 컴포넌트 수명 주기 메서드 등 React 컴포넌트에 대한 개요를 제공했다. 이 지식을 바탕으로 자신만의 커스텀 React 컴포넌트를 만들고 React 기술을 한 단계 더 발전시킬 수 있을 것이다.