React 컴포넌트(Component) ☕

안녕하세요~ 이번에는 리액트에서  웹 페이지를 구성하는 가장 기본적인 단위인 컴포넌트(Component)에 대해 살펴보겠습니다.

크게 5가지로 1. 컴포넌트 개념  2.컴포넌트 활용   3. 컴포넌트 만드는법 , 4.컴포넌트 장단점 5. 함수형 컴포넌트 VS 클래스형 컴포넌트 차이점에 대해설명해보겠습니다.

먼저, 컴포넌트의 개념입니다. 
컴포넌트? , 처음 들었을 때는 어? 어디서 들어봤는데? 라고 생각하신 분들도 계실겁니다. 컴포넌트는 리액트 앱을 구성하는 가장 작고 독립적인 단위입니다. HTML, CSS, 그리고 JavaScript를 하나로 묶어 특정 기능이나 UI를 담당하는 요소라고 생각하면 됩니다.

그럼 이 컴포넌트를 어디에다 활용할까요? 다음과 같은 곳에서 활용됩니다.

컴포넌트 활용
📓1.  UI 구성 요소 (버튼, 입력 필드, 메뉴, 테이블 등등)

     2.  페이지 레이아웃 (헤더, 푸터, 네비게이션 바, 사이드 바 등등)

     3.  기능 구현 (동영상 재생 기능, 캘린더 기능, 차트 기능 등등)

이렇게 다양한 곳에서 쓰이기도 합니다. 
다음은  컴포넌트 만드는 방법입니다. 설명하기 쉽게 예시 코드를 작성해서 설명하겠습니다. 

컴포넌트는 두 가지로 만들 수 있습니다.  
1️⃣함수형 컴포넌트  
2️⃣클래스형 컴포넌트

함수형 컴포넌트는 function 키워드를 활용하여 컴포넌트를 만듭니다. 다음은 함수형 컴포넌트 예시 코드 입니다.

import React from 'react';

function Sample({ month, date}) {
    return <h2>오늘은 {month}월 {date}일 입니다.</h2>;
}

export default Sample;

여기서 Sample 이라는 함수형 컴포넌트를 생성하고  month 와 date 라는 두 개의 매개변수를 받아 사용합니다. 

다음은 클래스형  컴포넌트 예시 코드입니다. 

import React, { Component } from 'react';

class Sample extends Component {
  render() {
    const { month, date } = this.props;
    return <h2>오늘은 {month}월 {date}일 입니다.</h2>;
  }
}

export default Sample;

여기서는 위에 함수형 컴포넌트와 달리 Class 라는 키워드를 사용해서 Sample 이라는 클래스형 컴포넌트를 생성합니다.
그리고 함수형 컴포넌트에서 매개변수로 받던 month와 date를 클래스형 컴포넌트에서는 this.props를 통해 접근합니다.

이렇게 두 가지의 컴포넌트 생성 방법으로 컴포넌트를 생성 할 수 있습니다. 두 개의 컴포넌트의 장단점과 차이점은 마지막에 있으니 끝까지 확인해주세요✅ 


다음은 컴포넌트의 장단점 입니다. 

컴포넌트 장점

1. 재사용성
2. 독립성
3. 유지보수성
4. 구조화
   

컴포넌트 단점

1. 학습 곡선
2. 과도한 분할
3. 상태 관리

이렇게 컴포넌트의 장단점을 살펴보았습니다. 컴포넌트를 효과적으로 활용하면 개발 생산성을 높일 수 있습니다.

 

마지막으로 함수형 컴포넌트와 클래스형 컴포넌트의 차이점입니다. 

특징	함수형 컴포넌트	클래스형 컴포넌트
간결성	간결하고 직관적	상대적으로 복잡
상태 관리	useState Hook	this.state
부수 효과	useEffect Hook	componentDidMount, componentDidUpdate 등
학습 난이도	쉽고 빠르게 학습 가능	약간의 학습 시간 필요
최근 추세	선호	점차 사용이 줄어듦

 

 

두 개의 방법 중 함수형 컴포넌트를 추천합니다.  최근들어 React 16.8 버전 이후 Hooks가 도입되면서 함수형 컴포넌트가 더욱 간결하고 효율적으로 코드를 작성할 수 있게 되어 선호되는 추세이기 때문입니다. 

이렇게 마지막으로 함수형 컴포넌트와 VS 클래스형 컴포넌트 차이점에 대해 알아보았습니다. 
댓글의 좋아요 또는 피드백 남겨주시면 감사하겠습니다 !!