[React] 컴포넌트에 대해

컴포넌트(Components)

 

설명

 

• JavaScript 기반의 프론트엔드 라이브러리로, 재사용 가능한 UI 요소인 컴포넌트를 통해 웹 애플리케이션 구축 사용
• 컴포넌트는 UI를 작은 독립적인 조각으로 분리하여 개발하여 개발을 단순화하고 유지보수성을 향상
• 리액트 애플리케이션은 여러 개의 컴포넌트로 이루어져 있으며, 각 컴포넌트는 특정한 기능을 수행하고 UI를 표현
• 자체적으로 상태(state)를 가지고 있을 수 있으며, 이 상태를 기반으로 UI가 업데이트
• 속성(props)를 통해 외부로부터 데이터를 전달 받을 수 있다.
• 클래스 컴포넌트와 함수형 컴포넌트로 나눌 수 있다.

 

---

 

사용하는 이유

 

재사용성

 

• 컴포넌트는 독립적인 UI 요소로서, 여러 곳에서 반복적으로 사용 가능
• 컴포넌트를 재사용함으로써 개발 생산성을 향상
• 예를 들어, 로그인 폼, 버튼과 같은 UI 요소는 여러 페이지나 다른 애플리케이션에서도 동일하게 사용

 

모듈화

 

• 컴포넌트는 작은 조각으로 분리되어 개발
• 모듈화된 컴포넌트는 개별적으로 개발하고 테스트할 수 있으며,
  필요한 경우 다른 컴포넌트와 조합하여 새로운 기능 개발 가능
• 코드의 가독성과 유지 보수성을 향상

 

상태 관리

 

• 컴포넌트는 자체적으로 상태를 가진다.
• 이 상태는 컴포넌트 내부에서 변경되고, 변경된 상태에 따라 UI가 업데이트
• 컴포넌트 단위로 상태를 관리함으로써 애플리케이션의 복잡성을 낮추고, 상태 관리를 용이

 

성능 최적화

 

• 리액트는 가상 돔(Virtual DOM)을 사용하여 성능을 최적화
• 컴포넌트의 상태가 변경되면, 리액트는 변경된 부분만 실제 돔에 업데이트
• 불필요한 렌더링을 방지하고, 애플리케이션의 성능을 향상

 

팀 협업

 

• 컴포넌트 기반의 개발은 다수의 개발자가 협업할 때 효과적
• 각 개발자는 자신이 맡은 컴포넌트를 독립적으로 개발하고, 필요한 경우 다른 컴포넌트와
  조합하여 애플리케이션을 구축
• 팀의 업무 분담과 협업을 원할

 

---

 

컴포넌트 예시

 

클래스형 컴포넌트

 

import React, { Component } from 'react';

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

export default Welcome;

 

 

 

함수형 컴포넌트

 

import React from 'react';

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

export default Welcome;

 

 

---

 

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

 

문법

 

• 클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의
• 함수형 컴포넌트는 JavsScript 함수 문법을 사용하여 정의

 

상태 관리

 

• 클래스형 컴포넌트는 state를 사용하여 내부 상태를 관리
• 함수형 컴포넌트는 이전에는 상태를 관리할 수 없었지만, 리액트 16.8 버전부터
  도입된 훅(Hook)을 사용하여 상태 관리 가능

 

라이프사이클 메서드

 

• 클래스형 컴포넌트는 라이프사이클 메서드를 사용하여 컴포넌트의 생명주기 이벤트에 대응 가능
• componentDidMount, componentDidUpdate, compoentWillUnmount 등의 메서드를 사용하여
  특정 시점에 코드를 실행 가능
• 함수형 컴포넌트는 초기 렌더링 이후에 실행되는 useEffect 훅을 사용하여 비슷한 기능을 구현

 

코드의 가독성과 간결성

 

• 클래스형 컴포넌트는 render() 메서드를 포함해야 하고, this 키워드를 사용해야 하는 등의 추가적인 구문이 있기 때문에 코드가 상대적으로 복잡
• 함수형 컴포넌트는 일반적으로 코드가 간결하고 읽기 쉬움

 

성능

 

• 클래스형 컴포넌트는 가상 돔(Virtual DOM)을 사용하는 데 비해 약간의 성능 오버헤드가 있을 수 있음
• 함수형 컴포넌트는 최적화된 훅(Hook)을 사용하여 성능을 향상
• 특히, React.memo를 사용하여 함수형 컴포넌트의 재렌더링을 방지

 

---