"30일 ReactJS" 챌린지 4일차에 오신 것을 환영합니다! 오늘 우리는 모든 React 애플리케이션의 구성 요소인 구성 요소와 Props를 살펴보겠습니다. 이러한 개념을 이해하면 UI를 재사용 가능하고 독립적인 부분으로 나눌 수 있습니다.

구성요소란 무엇입니까?

React의 구성 요소는 레시피의 재료와 같습니다. 다양한 재료를 결합하여 요리를 만드는 것처럼 구성 요소를 결합하여 React 애플리케이션을 구축합니다. 구성 요소는 선택적으로 입력(props라고도 함)을 받아들이고 화면에 표시되어야 하는 내용을 설명하는 React 요소를 반환하는 JavaScript 함수 또는 클래스입니다.

React에는 두 가지 주요 구성 요소 유형이 있습니다.

기능 구성 요소: JSX를 반환하는 JavaScript 함수입니다. 더 간단하고 읽기 쉽습니다.

클래스 컴포넌트: React.Component에서 확장된 ES6 클래스입니다. 상태 및 수명 주기 메서드와 같은 더 많은 기능을 가지고 있지만 최신 React 개발에서는 덜 일반적입니다.

예: 버튼 구성요소

간단한 버튼 구성 요소를 만들어 보겠습니다.

function Button() {
  return (
    Click me!
  );
}

이 버튼 구성 요소는 "Click me!"라는 텍스트가 포함된 버튼 요소를 반환하는 기능 구성 요소입니다.

구성요소가 중요한 이유

구성요소를 사용하면 UI를 더 작고 관리 가능한 조각으로 나눌 수 있습니다. 이렇게 하면 코드가 더 체계화되고 유지 관리가 더 쉬워집니다. 복잡한 요리를 여러 단계로 나누지 않고 요리한다고 상상해 보세요. 그것은 혼란스러울 것이다! 마찬가지로, 구성요소 없이 UI를 구축하는 것은 부담스러울 수 있습니다.

실제 사례: 레고 블록
레고 블록과 같은 구성요소를 생각해 보세요. 각 블록(구성 요소)은 애플리케이션의 일부이며 이를 결합하여 더 큰 것을 만들 수 있습니다. 레고 블록과 마찬가지로 구성요소는 애플리케이션의 다양한 부분에서 재사용할 수 있습니다.

소품이란 무엇입니까?
Props("properties"의 약어)는 한 구성 요소에서 다른 구성 요소로 데이터를 전달하는 방법입니다. 이는 함수 인수와 유사하며 구성 요소를 사용자 정의하는 데 사용할 수 있습니다.

예를 들어, 수신한 prop에 따라 다른 텍스트를 표시할 수 있는 Button 구성 요소를 생성한다고 가정해 보겠습니다.

function Button(props) {
  return (
    {props.label}
  );
}

이제 Button 구성요소를 사용할 때 label prop을 전달하여 텍스트를 맞춤설정할 수 있습니다.

function App() {
  return (
    

      
      
    
  );
}

여기서 버튼 구성요소는 두 번 사용되지만 '제출'과 '취소'라는 라벨이 다릅니다.

소품의 중요성

Prop는 구성 요소를 더욱 유연하고 재사용 가능하게 만듭니다. 구성 요소 내부에 값을 하드코딩하는 대신 props를 통해 동적 데이터를 전달할 수 있으므로 동일한 구성 요소를 다양한 컨텍스트에서 사용할 수 있습니다.

Vite를 사용하여 구성요소 및 소품 설정

개발 환경으로 Vite를 사용하고 있기 때문에 구성 요소와 소품 설정이 간단합니다. 따라오셨다면 Vite 프로젝트가 이미 구성되어 있습니다. 별도의 파일로 구성요소 생성을 시작하고 이를 기본 애플리케이션으로 가져올 수 있습니다.

프로젝트를 구성하는 방법은 다음과 같습니다.

1. 새 구성 요소 만들기: src 폴더에 Button.jsx라는 새 파일을 만들고 거기에 Button 구성 요소를 정의합니다.
2. 앱에서 구성 요소 사용: App.jsx 파일에서 Button 구성 요소를 가져와서 다른 소품과 함께 사용합니다.

모든 것을 하나로 묶기

컴포넌트와 소품은 React의 컴포넌트 기반 아키텍처의 핵심입니다. UI를 더 작은 구성 요소로 나누고 props를 사용하여 구성 요소 간에 데이터를 전달하면 확장 가능하고 유지 관리가 가능한 애플리케이션을 구축할 수 있습니다.

내일은 구성 요소가 동적 데이터를 관리하고 시간에 따른 변화에 대응할 수 있게 해주는 상태 및 수명 주기 방법에 대해 자세히 알아보겠습니다.