[React] 리액트 컴포넌트란?

React는 모듈화 된 사용자 인터페이스를 구축하기 위한 라이브러리로, 그 핵심은 컴포넌트입니다. 컴포넌트는 화면의 일부분을 구성하고, 재사용 가능하며 독립적인 단위를 제공합니다. 이번 포스팅에서는 React 컴포넌트의 개념, 종류, 작성 방법에 대해 알아보겠습니다.

 

 

컴포넌트 - 커버 이미지

 

목차

1. React 컴포넌트란?

2. React 컴포넌트 종류

3. React 컴포넌트 장점: 재사용성

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. React 컴포넌트란?

컴포넌트는 HTML, CSS, JavaScript가 결합된 UI 조각이라고 생각하면 됩니다. React에서 컴포넌트를 사용하면 각각의 조각들을 독립적으로 설계하고, 이를 재사용하여 일관성 있는 인터페이스를 구축할 수 있습니다. 컴포넌트는 화면을 구성하는 가장 작은 단위로, 각각의 컴포넌트는 자신만의 상태와 속성을 가질 수 있습니다.

 

2. React 컴포넌트 종류

React 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다. 함수형 컴포넌트는 최신 React 코드에서 많이 사용되며, 클래스형 컴포넌트는 이전에 사용되던 방식입니다.

 

2.1. 함수형 컴포넌트 (Functional Component)

함수형 컴포넌트는 단순한 JavaScript 함수로 정의되며, props(속성)을 인수로 받아 UI를 반환합니다. 함수형 컴포넌트는 간결하고, 최신 React에서는 Hooks를 통해 상태를 관리할 수 있어 매우 유용합니다.

function Greeting() {
  return <h1>Hello!</h1>;
}

 

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

클래스형 컴포넌트는 ES6의 클래스를 기반으로 만들어집니다. 클래스형 컴포넌트는 React 컴포넌트의 생명 주기 메서드를 활용할 수 있지만, 최근에는 함수형 컴포넌트와 Hooks를 사용하는 것이 더 권장됩니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

 

위 코드를 보면 클래스형 컴포넌트가 함수형 컴포넌트에 비해 길고 복잡한 것을 알 수 있습니다. 

 

3. React 컴포넌트 장점: 재사용성

React 컴포넌트의 가장 큰 장점 중 하나는 재사용성입니다. UI의 특정 부분을 컴포넌트로 분리하면, 다양한 곳에서 같은 컴포넌트를 반복적으로 사용할 수 있습니다. 이는 유지보수를 쉽게 하고, 코드를 모듈화 하여 코드 중복을 줄이는 데 매우 유용합니다.

function Link(props) {
  return <a href={`https://www.${props.link}.com}>{props.name}</a>;
}

function App() {
  return (
    <>
      <Link link={'naver'} name={'네이버'} />
      <Link link={'google'} name={'구글'} />
      <Link link={'facebook'} name={'페이스북'} />
    </>
  );
}

 

위 예시를 보면 Link 컴포넌트 하나를 반복적으로 사용해 네이버, 구글, 페이스북으로 이동할 수 있는 a 태그 3개를 만들었습니다. (props는 다음 글에서 다룰 예정이니 참고만 해주세요)

 

컴포넌트 파일별 분류

React 애플리케이션을 개발하다 보면 컴포넌트의 개수가 많아지고, 각각의 컴포넌트를 별도의 파일로 분류하는 것이 중요해집니다. 각 컴포넌트를 별도의 파일로 관리하면 프로젝트의 구조가 더 명확해지고, 코드 유지보수와 협업이 훨씬 쉬워집니다.

// link.js
export default function Link(props) {
  return <a href={`https://www.${props.link}.com}>{props.name}</a>;
}

// index.js
import Link from './link.js';

function App() {
  return (
    <>
      <Link link={'naver'} name={'네이버'} />
      <Link link={'google'} name={'구글'} />
      <Link link={'facebook'} name={'페이스북'} />
    </>
  );
}

 

 

 

 

React 컴포넌트는 UI를 구성하는 기본적인 요소로, 모듈화된 구조를 통해 개발자는 유지보수하기 쉬운 코드를 작성할 수 있습니다. 컴포넌트의 재사용성을 이해하고 활용하는 것은  복잡한 UI를 효율적으로 구현하고, 개발 생산성을 크게 높일 수 있습니다.

 

 

추천글

2024.09.27 - [개발 공부 일지/React] - [React] JSX는 무엇인가?

[React] JSX는 무엇인가?