[React] 컴포넌트(component)

복습

https://shins99.tistory.com/65

[React] 엘리먼트(element)

---

컴포넌트(component)

- React에서 컴포넌트란 자바스크립트 함수의 개념과 비슷하게 이해

- React에서는 애플리케이션의 UI를 설계할 때 사용자가 볼 수 있는 화면을 여러 개의 컴포넌트로 나누어 구성함

  (각각의 컴포넌트를 개별적으로 관리가능)

- 데이터(props)를 입력 받아 View의 상태에 따라 화면에 어떻게 표시되는지 정의하는 React 엘리먼트를 반환

- 선언 방식에 따라 클래스 기반의 컴포넌트와 함수 기반의 컴포넌트로 구분

 

클래스 컴포넌트와 함수 컴포넌트

- App 컴포넌트 :  function 키워드를 사용한 함수 컴포넌트

(컴포넌트를 정의하는 가장 간단한 방법 :  자바스크립트 함수를 작성)

 

함수 기반의 App 컴포넌트

export default function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

 

- lass 키워드를 사용하여 클래스 기반의 컴포넌트를 정의 가능

 

클래스 컴포넌트 :

- Component 클래스를 상속

- render() 메서드를 반드시 구현

- render() 메서드를 통해 화면에 보여주어야 할 JSX 표현식(expression)을 반환

 

클래스 기반의 App 컴포넌트

import React from "react";
export default class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

 

- React에서 이 두 가지 유형의 컴포넌트는 기능적으로 완전히 동일하게 동작

- 클래스 컴포넌트 : state 기능과 생명 주기 메소드를 사용 가능

- 함수 컴포넌트:  state 기능과 생명 주기 메소드를 사용 불가 : Hook 사용시 문제 해결

(클래스 컴포넌트보다 선언하는 방법이 훨씬 간결하고, 메모리의 소비 또한 적음)

 

- React 공식 문서에서는 클래스 컴포넌트보다 함수 컴포넌트와 Hook의 사용을 권장

 

컴포넌트의 생성

- React 프로젝트의 src 폴더에 Greeting.js 파일을 생성

 (컴포넌트의 이름을 대문자로 시작하도록 작성)

 

Greeting.js

function Greeting() {
  return (
    <>
      <h1>React Component</h1>
      <p>나의 첫 React 컴포넌트!</p>
    </>
  );
}
 
export default Greeting;

 

2. App.js 파일을 열고, 코드를 아래와 같이 변경

import Greeting from "./Greeting";
 
function App() {
  return <Greeting />;
}
 
export default App;

 

- 사용자 정의 컴포넌트를 사용하는 이유:  React.createElement() 메소드의 호출이나 JSX 구문으로 생성하는 Virtual DOM의 생성 코드를 사용자 정의 컴포넌트 쪽으로 이동시킴으로써 코드를 간결하게 만드는목적