[React] 컴포넌트 기반 개발의 중요성

 

 

컴포넌트 기반 개발의 중요성 

React 앱의 가장 작은 단위는 엘리먼트이다. 컴포넌트는 이러한 여러 엘리먼트와 함수들이 모여 있는 기능적 단위라고 할 수 있다.

• 컴포넌트도 하나의 엘리먼트이다. 이러한 엘리먼트들은 각각이 서로를 포함할 수도 있다.
• 컴포넌트는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음" 혹은 "UI를 구성하는 필수 요소"라고 할 수 있다.
• 컴포넌트 기반 개발은 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발하는 방식이다. 

컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장한다. 그래서 컴포넌트 간 의존성이 낮아지고 독립적으로 작동한다. 하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없기 때문이다. 예를 들어, 원하는 수정 사항에 맞추어 컴포넌트의 위치만 수정해 주거나 재사용할 수 있다.

 

리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다. 

 

 

 

모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 즉, 모든 컴포넌트 위에는 항상 root 역할을 하는 최상위 컴포넌트가 존재한다. create react app으로 만든 React 앱에서 볼 수 있는 <App> 이 대표적이다. 

 

이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다.  

 

 

 

리액트 어플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화하여 표현할 수 있다

 

위의 오른쪽 그림과 같은 트리 구조를 예로 들어보자면 먼저 근원이 되는 root 컴포넌트가 있고 그 아래 헤더, 콘텐츠 리스트가 온다. 헤더는 자신의 아래에 서치와 세팅 같은 자식 컴포넌트를, 콘텐츠 리스트는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가질 수 있다. 이러한 트리 구조에서 보듯이 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있다. 이렇게 독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성할 수도 있고, 더 나아가 최종적으로는 복잡한 애플리케이션도 만들 수 있다.

 

만약에 헤더를 화면 왼쪽으로 옮겨 사이드바로 변경하기 위해 어떻게 해야할까? 기존 방식대로라면 먼저 (1) HTML을 수정하여 구조를 바꾸고, (2) 화면의 상단에 맞추어 작성되어 있던 스타일 속성을 화면 왼쪽에 맞게 수정해야 한다. (3) 변경된 구조와 스타일에 맞추어 자바스크립트가 DOM을 조작하게끔 수정해 주는 것 역시 필요하다.

 

반면 같은 애플리케이션을 리액트를 이용하여 컴포넌트 기반으로 만들었다고 생각해 보자. 컴포넌트는 각자의 기능을 가지고 있으며, UI의 한 부분을 맡고 있다. 때문에 원하는 수정사항에 맞추어 기존 컴포넌트의 위치만 수정해 주면 된다. 즉, 리액트는 컴포넌트를 먼저 완성시키고, 레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있는 상향식 개발 (Bottom-up) 방식에 적합하다.

 

 

* 리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있다. 기존에는 클래스형 컴포넌트를 주로 사용했었지만, 최근에는 함수형 컴포넌트를 많이 사용한다.

 

함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

 

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;