[React] - 컴포넌트

 

---

---

 

컴포넌트

재사용이 가능한 각각의 독립된 모듈(UI) 코드 조각

이미 만들어진 컴포넌트들을 조합하여 화면을 구성 가능

 

컴포넌트 특징

 

구현

소스코드가 아닌 실행코드 기반으로 재사용할 수 있도록 이미 구현이 완료되어야 함

 

명세화

교체 가능한 컴포넌트를 개발하기 위해서는 표준을 준수하여 개발

해당 컴포넌트의 용도, 유형, 기술 표준과 인터페이스 등에 대한 정보들에 대해서 명세화

 

패키지화

컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화

 

배포

사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용 할 수 있도록 독립적으로 배포 가능

 

하나 이상의 클래스 들로 구성

하나 이상의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발

컴포넌트가 되기 위해서는 반드시 클래스나 객체로 만들어야만 하는 것은 아님.

컴포넌트가 실행될 때 해당 컴포넌트의 인스턴스인 컴포넌트 객체가 수행

 

 

인터페이스를 통해서만 접근 가능

외부에서 접근할 수 있도록 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공

따라서 인터페이스는 외부와의 연결을 위해 반드시 존재

컴포넌트가 내부 정보를 숨기고 인터페이스만 제공 => 은닉성

소프트웨어도 하드웨어처럼 조립 기반으로 갈 수 있게 됌

 

 

리액트 컴포넌트

리액트는 컴포넌트를 중심으로 동작

React에서 컴포넌트는 UI의 일부를 제어하는 재사용 가능한 코드

리액트는 여러 컴포넌트 조각으로 이루어지며 만들어진 앱을 이루는 최소한의 단위

하나의 컴포넌트를 여러 곳에서 사용 가능

여러명이 동시에 각각의 컴포넌트 수정 가능

컴포넌트 이름은 항상 대문자로 시작

 

함수형 컴포넌트

자바스크립트의 함수 기반 컴포넌트

 

function으로 컴포넌트를 정의하고, return문에 jsx 코드 반환

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

props를 인수로 받아 React 요소를 반환

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

함수 컴포넌트 사용 이유

1. Hooks
2. 직관적인 코드
3. 메모리 자원 효율

 

 

클래스형 컴포넌트

자바스크립트의 클래스 기반 컴포넌트

 

class로 정의하고 render()함수에서 jsx 코드 반환

import React, { Component } from 'react';

클래스 컴포넌트는 React의 ComponentClass를 상속받아 구현되기 때문에 반드시 {Component}를 import 하고 React.Component 를 상속

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React.Component를 확장한 클래스로 선언되며, render 메서드를 포함

class Welcome extends React.Component {
	render() {
		return

Hello, {[this.props.name](<http://this.props.name/>)}

;
	}
}

 

클래스 컴포넌트 특징

1. class 키워드로 클래스 컴포넌트 생성
2. React.Component 상속
3. render() 메서드 필수 사용
4. this 키워드로 프로퍼티 참조

 

 

함수 컴포넌트 vs 클래스 컴포넌트 적합 사용

 

함수 컴포넌트

• 함수 컴포넌트는 가독성이 좋기에 많이 사용할 것. 클래스 컴포넌트보다 간결
• useState, useEffect, useContext 등과 같은 React 훅 사용 (훅은 클래스에서 사용 불가)
• 프롭스를 전달받아 이를 기반으로 렌더링하는 컴포넌트를 생성 => 프레젠테이셔널 컴포넌트 / 덤 컴포넌트

 

클래스 컴포넌트

• 레거시 프로젝트나 이전 버전의 라이브러리에서 작업하는 경우
  • 특히 componentWillMount, componentWillUpdate, componentWillReceiveProps와 같은 라이프사이클 메서드를 필요로 할 때
  • 그러나 이런 라이프사이클 메서드는 안전하지 않다고 여겨지며 향후 React 버전에서 폐기될 예정
• 자식 컴포넌트 트리에서 발생한 오류를 잡아내고 처리하는 React의 ErrorBoundary 기능 사용
  • 2021년 9월을 기준으로 Hooks에서는 아직 Error Boundaries를 사용할 수 없기 때문에 함수 컴포넌트에서는 사용할 수 없음

 

 

컴포넌트의 라이프 사이클

1. 생성될 때 (마운트 될 때 - mount)
2. 업데이트할 때
3. 제거할 때 (마운트 해제 될 때 - unmount)

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

 

---

참고

https://wikidocs.net/197614

https://life-with-coding.tistory.com/508