여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - 구성 요소
React – 구성 요소
4개월전 작성
5개월전 수정

React

구성 요소

구성 요소는 독립적이고 재사용 가능한 코드 비트다.
이는 JavaScript 함수와 동일한 목적을 수행하지만 독립적으로 작동하고 HTML을 반환한다.

구성 요소는 클래스 구성 요소와 함수 구성 요소의 두 가지 유형으로 제공된다.
이 튜토리얼에서는 함수 구성 요소에 중점을 둘 것이다.

⭐ 이전 React 코드 베이스에서는 Class 구성 요소가 주로 사용되는 것을 볼 수 있다. 이제 React 16.8에 추가된 Hooks와 함께 Function 구성 요소를 사용하는 것이 좋다. 참조용으로 클래스 구성 요소에 대한 선택적 섹션이 있다.

첫 번째 구성 요소 만들기

React 컴포넌트를 생성할 때 컴포넌트 이름은 반드시 대문자로 시작해야 한다.

클래스 구성 요소

클래스 구성 요소에는 extends React.Component문이 포함되어야 한다.
이 명령문은 React.Component에 대한 상속을 생성하고 구성 요소에 React.Component의 기능에 대한 액세스를 제공한다.

구성 요소에는 render()메서드도 필요하며 이 메서드는 HTML을 반환한다.

예제

Car 라는 클래스 구성 요소를 만든다.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}
기능 구성 요소

다음은 위와 동일한 예이지만 대신 Function 구성 요소를 사용하여 생성되었다.

Function 구성 요소도 HTML을 반환하고 Class 구성 요소와 거의 동일한 방식으로 동작하지만 Function 구성 요소는 훨씬 적은 코드를 사용하여 작성할 수 있고 이해하기 쉬우며 이 자습서에서는 선호된다.

예제

Car 라는 기능 구성 요소를 만든다.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

구성요소 렌더링

이제 React 애플리케이션에는 <h2> 요소를 반환하는 Car라는 구성 요소가 있다.

애플리케이션에서 이 구성요소를 사용하려면 일반 HTML과 유사한 구문을 사용한다. <Car />

예제

“루트” 요소에 Car 구성 요소를 표시한다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
기본 예시
예제 보기

Props

구성 요소는 속성을 나타내는 Props으로 전달할 수 있다.

Props은 함수 인수와 같고 속성으로 구성 요소에 보낸다.

예제

특성을 사용하여 색상을 Car 구성 요소에 전달하고 render() 함수에 사용한다.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
기본 예시
예제 보기

구성요소 내 구성요소

우리는 다른 구성 요소 내부의 구성 요소를 참조할 수 있다.

예제

Garage 구성 요소 내부에 있는 Car 구성 요소를 사용한다.

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
기본 예시
예제 보기

파일의 구성요소

React는 코드를 재사용하는 것이 전부이며 구성 요소를 별도의 파일로 분할하는 것이 좋다.

그러기 위해서는 .js 파일 확장자를 가진 새 파일을 만들고 그 안에 코드를 넣는다.

⭐ 파일 이름은 대문자로 시작해야 한다.

예제

새 파일 이름은 “Car.js”다.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

 

Car 구성 요소를 사용하려면 응용 프로그램에서 파일을 가져와야 한다.

예제

이제 응용 프로그램에서 “Car.js” 파일을 가져오면 여기서 만든 것처럼 Car 구성 요소를 사용할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그