리액트(React), 컴포넌트(Component)에 대해서

컴포넌트(Component)란?

React를 사용할 때는 컴포넌트를 class 또는 함수로 정의할 수 있습니다. class로 정의된 컴포넌트는 아래에 자세히 설명하고 있듯 보다 많은 기능을 제공합니다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다.

https://ko.legacy.reactjs.org/docs/react-component.html

 

리액트나 다른 프론트엔드 프레임워크를 사용하면 자주 나오는 단어 중 하나가 컴포넌트입니다. 그럼 컴포넌트는 무엇일까요? 

 

컴포넌트의 영어 단어 뜻은 요소입니다. 즉, 컴포넌트는 요소를 말하는 것입니다. 그리고 지금 여기서 이야기 할 컴포넌트도 요소입니다. 간단하게 말해서 리액트와 같은 프론트엔드 프레임워크에서는 컴포넌트를 사용하여 재사용 가능한 UI 블록을 만들 수 있습니다.

 

그럼 이런 컴포넌트가 왜 중요하고, 알아야하는 것 일까요?

 

백엔드 프로그래밍 언어의 객체 지향 프로그래밍을 프론트엔드에서 구현했다고 생각하면 쉽겠죠? 객체 지향을 사용하는 이유는 추상화, 상속, 다형성, 캡슐화의 객체 지향 프로그래밍의 4가지 특징 때문입니다. 컴포넌트를 이용한 개발의 장점은 재사용성, 유지 보수성, 모듈화 등이 있는데요.

 

컴포넌트를 사용하면 코드의 재사용성을 높일 수 있고, 유지보수를 쉽게 할 수 있으며, 더 직관적인 UI 구조를 설계할 수 있습니다.

 

1. 컴포넌트의 기본 개념

• 컴포넌트란 무엇인가?

리액트에서의 컴포넌트는 UI를 구축하는 최소 단위입니다. 각각 컴포넌트가 독립적으로 동작하고, 재사용이 가능한 코드 블록입니다.

 

• 리액트 컴포넌트의 종류

리액트의 컴포넌트는 class형 컴포넌트와 함수형 컴포넌트가 있습니다.

 

  1. class형 컴포넌트

class Hello extends React.Component {
	render() {
    	return <h1>Hello, {this.props.name}</h1>
    }
}

 

  2. 함수형 컴포넌트

function Hello(props) {
	return <h1>Hello, {props.name}</h1>
}

 

리액트의 컴포넌트는 각각 이렇게 구현할 수 있으며, 이 함수와 클래스를 호출함으로써 컴포넌트가 실행되게 할 수 있습니다.

 

2. 컴포넌트의 상태와 생태주기

• 상태와 속성 

그럼 웹 어플리케이션에서 데이터는 어떻게 전달할까요? 컴포넌트들을 분리에서 가장 중요하다고도 볼 수 있는 부분이 각각의 분리된 컴포넌트들의 데이터 공유입니다. 한 컴포넌트에서 데이터가 변경되었을 때 그 데이터와 같은 데이터를 표시하는 다른 컴포넌트가 있다고 했을 때, 데이터가 이 요소에서 변했어도 다른 요소에서도 같이 변해야 하겠죠?

 

그래서 리액트는 컴포넌트들을 속성(Props)을 통해서 부모요소에서 자식 요소로 데이터를 전달합니다. 그리고 상태(State)를 통해서 컴포넌트 내부의 데이터를 관리합니다.

 

  1. 상태(State)

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1}>Click me</button>
    </div>
  )
}

 

위의 코드에서 보면 count 가 현재 상태의 값을 담고 있는 변수고, setCount는 상태를 갱신하는 함수가 됩니다. 이 변수들은 useState함수를 이용해서 상태를 관리합니다. 

 

  2. 속성(Props)

import React from 'react';

// 자식 컴포넌트: props를 받아서 화면에 출력
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 부모 컴포넌트
function App() {
  const userName = 'Alice';
  return (
    <div>
      {/* Greeting 컴포넌트에 props로 name을 전달 */}
      <Greeting name={userName} />
    </div>
  );
}

export default App;

 

부모 컴포넌트에서 name 속성에 값을 전달하고, 자식 컴포넌트에서 props를 인자로 받아서 name 속성을 사용해서 부모 컴포넌트에서 전달한 값을 화면에 출력할 수 있습니다.

 

 

리액트로 개발을 하게 되면 당연하게 사용해야하는 컴포넌트. 어디까지의 코드를 한 컴포넌트로 묶을 것인지, 이런 부분들을 생각하는 것도 개발의 즐거움 중 하나가 아닐까 생각합니다. 이번 포스팅에서는 컴포넌트의 기본 개념에 대해서 알아보았습니다. 실제 개발을 하다보면 컴포넌트들이 굉장히 다양하고 깊은 구조로 구성되는 것을 느낄 수 있습니다. 그 구성에서 끝과 끝의 컴포넌트가 데이터를 공유해야 할 때 위에 있는 속성을 통해서 데이터를 공유한다면 상당히 먼 곳에서부터 컴포넌트들을 엮어야 하는 경우가 있습니다. 이런 경우에는 어떻게 해야할까요?

 

다음 포스팅은 그런 경우를 해결하는 Redux를 사용해서 상태를 관리하는 방법을 알아보도록 하겠습니다.