[React] 컴포넌트

컴포넌트

• 사용자가 볼 수 있는 요소
• 단순한 템플릿 이상의 기능을 가지고 있다.

컴포넌트 기능

1. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것
2. 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있다.
3. 임의 메서드를 만들어 특별한 기능을 붙일 수 있다.

컴포넌트를 선언하는 방식

• 함수 컴포넌트
• 클래스형 컴포넌트

클래스형과 함수형 컴포넌트 차이점

클래스형 컴포넌트

import React, { Component } from "react";

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

export default App;

• state 기능 및 라이프 사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.
• render 함수가 꼭 있어야하고 그 안에서 보여 주어야 할 JSX를 반환해야 한다.

함수형 컴포넌트

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

장점

• 클래스형 컴포넌트보다 선언하기가 훨씬 편하다.
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
• 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.
  (함수, 클래스형 컴포넌트는 성능과 파일 크기 면에서 사실상 별 차이가 없으므로 이 부분은 너무 중요하게 여기지 않아도 된다.)

단점

• state와 라이프사이클 API를 사용할 수 없다.
  -> Hooks 기능으로 해결할 수 있다.

리액트 공식 메뉴얼

• 함수 컴포넌트 + Hooks

컴포넌트 생성 (MyComponent.js)

const MyComponent = () => {
  return <div>나의 새롭고 멋진 컴포넌트</div>;
};

화살표 함수 (ES6)

• 기존 function을 이용한 함수 선언 방식을 화살표 함수로 아예 대체할 수 없다.
• 서로 가리키고 있는 this의 값이 다르다.

function BlackDog() {
  this.name = "흰둥이";
  return {
    name: "검둥이",
    bark: function () {
      console.log(this.name + "멍멍"); // 검둥이 멍멍
      // 자신이 종속된 객체를 this로 가리킨다.
    },
    bark: () => {
      console.log(this.name + "멍멍"); // 흰둥이 멍멍
      // 자신이 종속된 인스턴스를 가리킨다.
    },
  };
}

결론

• function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것 간에는 큰 차이가 없다.

모듈 내보내기 (MyComponent.js)

export default MyComponent;

모듈 불러오기 (App.js)

import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;