[React] 컴포넌트(Components) 이해하기

0️⃣ 리액트의 컴포넌트란?

리액트에서 컴포넌트는 UI를 구성하는 재사용 가능한 독립적인 모듈이에요.
각 컴포넌트는 자체적인 상태(state)와 렌더링 로직을 갖고 있으며, 이러한 컴포넌트들을 조합하여 복잡한 UI를 만들 수 있습니다.

리액트는 Component 기반의 구조로 이루어진 특징이 있으며.
리액트는 모든 페이지가 Component로 구성되어 있거나
하나의 Component가 여러개의 Component로 이루어질 수 있어요.

🐸 : 위와같은 특징을 가진 리액트는 한개의 html이라는 레고판에서 수십, 수백개의 컴포넌트(Component)라는 레고 블록을 조립하듯 끼워 만드는 웹 라이브러리입니다

<컴포넌트 예시 구성도 사진>

1️⃣ 함수형 컴포넌트(Functional Component)

함수형 컴포넌트는 함수로서 컴포넌트를 정의합니다. 간단하고 가독성이 좋으며, 최근 리액트의 Hooks 기능을 사용할 수 있어 상태(state)나 생명주기 메서드를 사용하지 않고도 상태 관리와 라이프사이클 기능을 사용할 수 있습니다.

🚩 클래스형 컴포넌트도 있는데 리액트 공식문서에서 함수형 컴포넌트 사용을 적극 권장하고 있기 때문에 클래스형 컴포넌트는 따로 포스팅 할게요

💡 Simple React Snippets 이라는 vsCode Extension을 깔면 다양한 단축어를 통해 쉽게 함수형 컴포넌트를 만들 수 있습니다!
아래와 같이 명령어를 치고 tab 키를 누르면 자동으로 양식이 완성되는 것을 볼 수 있습니다

명령어는 아래와 같이 익스텐션의 세부정보 스크롤을 통해 확인할 수 있습니다

💬 예시

import React from 'react';

// src/components/welcome.tsx
// 함수형 컴포넌트 정의
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

//src/App.tsx
// 함수형 컴포넌트 사용
const App = () => {
  return (
    <div>
      <Welcome name="David" />
      <Welcome name="Anne" />
      <Welcome name="Lee" />
    </div>
  );
};

export default App;

📝결과화면

🐸 : 위와 같이 Welcome 이라는 컴포넌트하나를 만들어 놓고 props 로 다양한 임의의 값을 넘겨 한번의 'Hello, ???' 이라는 템플릿을 선언하여
??? 에 넘어갈 값만 바꿔가며 빠르게 렌더링 할 수 있어요.!

2️⃣ 컴포넌트의 장점

리액트 컴포넌트의 주요 장점은 다음과 같아요.!

1. 단방향 데이터 흐름(Unidirectional Data Flow):
   리액트는 단방향 데이터 흐름을 따릅니다.
   부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있지만,
   자식 컴포넌트에서 부모 컴포넌트로 직접 데이터를 변경할 수는 없습니다.
   이는 데이터 흐름을 예측 가능하게 만들어서 앱의 상태 관리를 간소화합니다.

2. 재사용성과 모듈화:
   컴포넌트의 재사용성이 뛰어나며, 한 번 작성한 컴포넌트를 여러 곳에서 사용할 수 있습니다. 이는 코드의 중복을 줄이고 유지 보수를 용이하게 합니다.

   🐸 : 이외에도 더 많지만 제가 생각하기에 가장 중요한 장점이라고 생각해요

🚩 props와 state에 대해서는 다음 포스팅에서 더 자세히 다룰게요

끝🙋🏻

💬 : 위 내용에대해 더 궁금한점이 있거나,
틀린내용이 있거나
질문이 있다면 댓글로 달아주세요.! talk!talk!