Component

" 컴포넌트는 리액트의 심장이다! " - React 개발자 Dan Abramov

 

리액트 없이 HTML과 Javascript만을 갖고 웹을 개발하려고 한다면 웹에 있는 각 기능을 html 파일 안에서 하드코딩된 형식으로 전부 구성해야 하며, Javascript를 일일이 연결해서 그 기능을 구현해야 했다.

 

하지만, React에서 Component의 개념을 제시한 뒤로는 HTML은 오직 렌더링 이후의 결과만을 보여주는 역할만을 수행했고, 나머지 웹의 구조부터 기능에 이르기까지 전반적인 내용들 Component 단위로 쪼개어 구현한 뒤 Root 단계에서 조립하는 식으로 변화되었다.

Component 기반 개발의 특징과 장점

컴포넌트는 웹의 각각에 보여지는 부분들을 기능 단위로 쪼개어 개발된다. 이 때의 기능 단위는 통상 사용자가 UI상에서 상호작용하는 하나의 요소를 기준으로 한다.

장점
1. 재사용성 : 위와 같은 방법으로 개발된 한 컴포넌트는 구조/기능구현/디자인까지 구현되어 나오고, root 단계에서 조립만 하면 되는 '모듈화'가 되어있기 때문에 재사용성이 높다. 만약, 나열된 트윗 목록에 하나의 트윗을 추가하고 싶다면 Tweet Component를 재사용해서 하단에 추가하는 코드만 작성하면 된다.
(만약, html과 js로 개발한다면 기존에 있었던 div 요소의 형제 요소를 넣어주고, js로 같은 포맷을 받아올 수 있도록 코딩을 따로 해줘야 할 것이다.)

2. 유지보수 :컴포넌트 개발의 장점은 유지보수에 유리하다는 점이다. 유지보수 단계에서는 사용자의 니즈와 사업의 목적에 맞게 업데이트가 되는 과정에서 화면에 보여지는 각 요소를 수정할 필요가 생기는데, 컴포넌트 기반의 개발에서는 굳이 웹 전체를 고치지 않고 수정하기 원하는 해당 컴포넌트t만을 수정하면 되기에 유지보수에 유리하다.

특징
1. 단일책임의 원칙 : 컴포넌트의 장점을 살리기 위해서는 먼저, 관심사에 따라 딱 한가지의 역할만 수행시키도록 관심사 분리에 노력을 기울여야 한다. 한 컴포넌트가 다양한 기능을 담당한다면, 다른 컴포넌트 혹은 상위 요소로부터 여러 데이터를 전달받아 처리하게 되는데, 이는 예기치 못한 Side Effect를 야기할 수 있다. 이는 컴포넌트 기반 개발의 장점을 상당히 약화시키기에 Side Effect의 발생을 최소화하도록 노력해야 한다.

2. 가능한 한 전달받은 속성에 대한 제어는 외부에 위임하자! : 컴포넌트는 가능한 한 단일한 속성으로부터 위임받아 단일한 기능을 수행할 수 있어야 한다. 만약 컴포넌트 내부에서 복잡한 제어가 발생한다면 그럴수록 root 단계에서 해당 컴포넌트를 사용하기 위해 고려해야 하는 점이 늘어날 것이다.
하지만, 이와 반대로 외부 라이브러리에 제어장치를 위임할수록 해당 제어장치에 대한 이해도가 필요하기에 상황에 따라 유연하게 양자를 사용할 수 있어야 한다.

 

Component 기본 문법

컴포넌트를 선언하는 방법은 2가지가 있다.

1. 클래스 컴포넌트

import React from "react";

export class ClasComponent extends React.Component {
  render() {
    return <h1>이거슨 클래스형 컴포넌트</h1>;
  }
}

2. 함수 컴포넌트

import React from "react";

export function FunctionComponent () {
  return <h1>이거슨 함수형 컴포넌트</h1>;
}

 

그리고, 최종 단계에서 조립할 때는 다음과 같이 조립한다.

최종 조립 단계는 JSX 형태로 return 되어 렌더링 하기에, JSX 규칙을 따라 조립하면 된다.

// 다른 파일에서 만든 컴포넌트를 사용하고자 한다면..
import { 컴포넌트 함수/클래스 명} from "경로"

import "./styles.css";
import React from "react";
import { ClasComponent } from "./component/ClassComponent";
import { FunctionComponent } from "./component/FunctionComponent";

export default function App() {
  return (
    <div className="App">
      <ClasComponent />
      <FunctionComponent />
    </div>
  );
}

 

Github Link : https://github.com/Whaleinmilktea/Haseong-Study-Platform/tree/main/React/Component