컴포넌트 선언

리액트의 컴포넌트는 템플릿 이상의 기능을 수행한다. 데이터에 맞춰 UI를 구성하는 것, 라이프사이클 API를 이용해 변화가 생길 때 작업을 처리하는 것, 임의의 메소드를 만드는 것 등이 있다.

프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하는 내용을 보여준다.

 

리액트에서 컴포넌트는 함수형 또는 클래스형 컴포넌트 선언으로 만들 수 있다.

함수형, 클래스형 컴포넌트에 대해 간단히 알아보자.

1. 함수형 컴포넌트

함수형 컴포넌트는 클래스형보다 선언하기 편하다. 메모리 자원도 덜 사용하고, 배포할 때 결과 파일이 더 작지만 큰 차이는 없다.

 

클래스형과 다르게 state와 라이프사이클 API를 사용할 수 없다는 것이 단점이지만 리액트 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결되었다. 리액트 공식 매뉴얼에서는 함수형 컴포넌트와 Hooks 사용을 권장하고 있다.

 

다음은 함수형 컴포넌트의 예시 코드이다.

import React from 'react';
import './App.css';

function App(){
    const name = '윤냐냐';
    return <div className='react'>{name}</div>;
}

export default App; //다른 파일에서 이 파일 import할 때 App 함수를 가져오도록 설정

2. 클래스형 컴포넌트

클래스형 컴포넌트는 state기능, 라이프사이클 기능,  임의의 메서드 정의가 가능하다는 것이다.

 

다음은 클래스형 컴포넌트의 예시 코드이다.

import React, { Component } from 'react';
import './App.css';

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

export default App;

---

REFERENCES

김민준. 2019. 리액트를 다루는 기술, 개정판. 3장 컴포넌트