surf react : Component

Dino_·2021년 7월 16일

React component

surf react

목록 보기

3/9

🔔 Goal

Component에 대해서 이해한다.

🌳 Component

react의 가장 중요한 요소 중 하나인 컴포넌트(Component)를 알아보자.

공식 문서에 따르면, 컴포넌트는 개념적으로 props라는 input값을 받고나서, UI, 즉 View(state) 상태에 따른 화면에 어떻게 출력이 되는지 Output을 React Element(JSX)로 보여주는 함수를 뜻한다.

그래서 합성을 통해 UI를 재사용할 수 있고, 독립적인 단위로 쪼개어 생각할 수 있게 한다. 상속을 따르는 대신 모듈로 따로 분리해 합성을 사용하길 권장한다.

Component는 기능을 단위별로 캡슐화하는 리액트의 기본 단위다. 그리고 이러한 단위를 제공하는 큰 이유 중 하나는 재사용성과 확장성을 위함이다.

react에서 만들어진 홈페이지는 이러한 컴포넌트들의 조합을 통해 만들어진다.

react Component는 크게 두 가지 종류로 나눈다.

클래스로 정의해서 만드는 클래스 컴포넌트 그리고 함수로 정의해서 만드는 함수형 컴포넌트가 있다.

🍃 Class Component

class React, { Component } from 'react';

class Hello extends Component {
  render() {
    return (
      <div>{this.props.name}님 hello, react</div>  
    );
  }
}

🍃 Functional Component

import React from 'react';

const Hello = (props) => {
  return ( 
    <div>{props}님 hello, react</div>
  );
}

🍃 차이점

클래스형 컴포넌트와 함수형 컴포넌트는 작성 방법에만 차이가 있는 것이 아니다.

가장 큰 차이는 클래스형 컴포넌트에는 상태(State)가 있다는 것이다.
또한, 클래스형 컴포넌트에는 라이프사이클 메서드라는 특수한 메서드를 정의해서 사용할 수 있다.

물론 react hook이 나오면서 이러한 차이를 극복할 수 있게 된다.

그렇다고 해서 클래스형 컴포넌트와 함수형 컴포넌트가 이제 완전히 같다는 말은 아니다. hook을 활용해도 내부적으로 동작하는 방식이 다르다.

또 다른 이슈로...

성능 측면에서 마운트되는 속도나 함수, 클래스 동작 방식의 차이로 어느 컴포넌트가 더 유리하다 라는 이야기를 보면서 드는 생각은...

사실 성능이 이런 함수나 클래스냐기보다는 무슨 동작을 하는 코드냐에 더 큰 영향을 받지 않을까 한다.

또한, 벤치마킹 실험에서도 성능적으로 거의 차이가 없다고도 한다.

내부 동작들에 대한 정보를 아주 상세하고 이해하기 쉽게 설명해놓은 글을 첨부하겠다.

https://overreacted.io/ko/how-are-function-components-different-from-classes/

🍃 Component의 합성

컴포넌트에서 합성은 서로 다른 객체를 여러개 붙여 새로운 기능이나 객체를 구성하는 행위를 말한다. 상속과는 다르게 클래스나 함수간 유기적으로 융통성있게 합성할 수 있다.

예를 들면 어떤 컴포넌트를 만들어 새로 만든 컴포넌트를 담아줘야할 때가 있다. 만약 자식 요소가 무엇이 들어올지 알지 못하는 상황에서 컴포넌트를 제작한다고 생각해보자.

어떠한 자식요소를 props을 통해 출력에 그대로 전달하기 위해서는 children이라는 방법을 사용할 수가 있다.

function HeadBorder(props) {
  return (
    <div className={'border'} style={{props.color}}>
      {props.children}
    </div>
  );
}

export default HeadBorder

이렇게 props.children를 사용하게 되면 다른 컴포넌트에서 JSX를 중첩하여 어떤 자식이든 전달할 수 있게된다.

import './FancyBorder.js'

function Dialog() {
  return (
    <HeadBorder color="aqua">
      {/* children from */}
      <h2 className="Dialog-title">
        New Dialog
      </h2>
      {/* to */}
    </HeadBorder>
  );
}

export default Dialog;