[React] React Component (컴포넌트)

React 의 가장 큰 장점 중 하나는 컴포넌트를 사용한 깔끔한 프로젝트 구성과 관리 효율성이 있습니다.

하나의 파일 안에 필요한 모든 코드를 넣는 것이 아니라 필요한 기능들과 input 되어져야 될 파일들을 따로 구분시켜 필요할 때마다 해당 기능들을 가지고 있는 컴포넌트 파일만을 간편하게 import 해서 사용하는 것입니다.

단일 컴포넌트 파일을 만들어 놓기만 해도 원할 때마다 재사용하여 구성할 수 있습니다.

 

이 컴포넌트를 어떻게 사용하고 구성하는지에 대해 예시 코드로 테스트해보며 정리해보겠습니다.

 

 

기존의 React 파일 구성

index.js

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <h1>My Favourite Foods</h1>
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  </div>,
  document.getElementById("root")
);

 

컴포넌트로 관리하지 않는 초기의 React 파일을 보면 렌더링 하고 있는 태그 내용들을 일일히 만들어서 root 영역에 넣어주고 있습니다.

이렇게 하나의 파일 안에 모든 HTML 내용을 작성한다면 그냥 HTML 파일에 몰아서 쓰는 것과 다름이 없습니다.

그만큼 코드가 길어질 수록 파악하기도 어려울 것입니다.

 

 

컴포넌트로 구성

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

 

App.jsx

import React from "react";
import Heading from "./Heading";
import List from "./List";

function App(){
  return (
    <div>
      <Heading />
      <List />
    </div>
  );
}

export default App;

 

Heading.jsx

import React from "react";

function Heading() {
  return <h1> My Favourite Foods</h1>;
}

export default Heading;

 

List.jsx

import React from "react";

function List() {
  return (
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  );
}

export default List;

기존 방식대로 만들어진 React 파일을 컴포넌트로 나누게 되면 이런 식으로 나눌 수 있을 것입니다.

 

(1) 처음에 render 함수에서 존재하던 h1, ul 태그들을 각각 Heading.jsx, List.jsx 파일로 나눕니다.

(2) 나누어진 각 파일에는 렌더링 될 것이기 때문에 react를 import 받습니다.

(3) 파일마다 function 으로 반환될 태그 내용들을 넣어주게 됩니다.

(4) 반환될 컴포넌트 내용들을 만들었다면 이것을 내보내기 해야 이 이 컴포넌트들을 다른 외부에서 참조해서 사용할 수 있습니다.  export default {참조될 컴포넌트의 메인 function 명} 이 내보내기 하는 명령어 입니다.

(5) 컴포넌트로 만들어진 Heading과 List를 App에서 참조합니다.

(6) 컴포넌트를 import 받게 되어 사용하려면 import 받아 지정한 이름으로 <{지정한 컴포넌트 명} /> 태그에 넣어 사용할 수 있습니다.

예) import List from "./components/LIst"  => <List />

- components 폴더 안에 있는 List 컴포넌트를 import 받아 List로 이름을 지정해주고 <List /> 로 적용하여 사용

(7) App 또한 컴포넌트이기에 export 하여 내보내기 해줍니다.

(8) 최종적으로 렌더링되어 넣어질 js 파일에 똑같이 App 컴포넌트를 import 하여 넣어주기만 하면 됩니다.

 

 

과정을 길게 작성하여 컴포넌트로 관리하는 것이 더 복잡하다고 느낄 수 있으나 실제로 React 프로젝트를 진행하면 컴포넌트로 관리할 수 밖에 없을 것입니다.

또한, 진행하고 있는 프로젝트가 커지면 커질 수록 컴포넌트 또한 늘어날 것이기 때문에 애초에 컴포넌트만을 따로 담아 관리하는 경로를 만들어 놓아 한번에 관리하는 것 또한 효율적이라고 볼 수 있습니다.