[React] 컴포넌트

1. 클래스형 컴포넌트

import React, { Component } from "react";

class App extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default App;

클래스형 컴포넌트와 함수형 컴포넌트의 차이점

- 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것

- 임의 메서드를 정의할 수 있다는 것

 

클래스형 컴포넌트에서는 render 함수가 꼭 있어야하고, 그 안에서 보여주어야 할 JSX를 반환해야함

 

2. 함수형 컴포넌트

- 선언하기 편함

- 메모리 자원도 클래스형 컴포넌트보다 덜 사용

- state와 라이프사이클 API의 사용이 불가능 -> Hooks라는 기능이 도입되면서 해결

 

---

3. 컴포넌트 생성

- 파일만들기 -> 코드 작성하기 -> 모듈 내보내기 및 불러오기

 

1 : src 디렉터리에 파일(MyComponent.js) 생성

2 : 코드 작성 (MyComponet.js 작성)

import React from "react";

const MyComponent = () => {
  return <div>컴포넌트</div>;
};

export default MyComponent;

* 함수형 컴포넌트를 선언할 때 function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것간에는 큰 차이가 없음.

 

3 : 모듈 내보내기(export)

export default MyComponent;

다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponet 클래스를 불러오도록 설정함

 

4 : 모듈 불러오기(import | App.js 작성)

import React from "react";
import MyComponent2 from "./MyComponent2";

const App = () => {
  return <MyComponent2 />;
};

export default App;

 

* 도서 '리액트를 다루는 기술' 참조