리액트는 Component 기반의 구조이다. 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.
컴포넌트
컴포넌트란?
사용자 인터페이스 일부를 표시하는 재사용 가능한 코드의 조각
함수가 입력을 받아 출력을 리턴하는 것처럼 Component도 입력을 받아 정해진 출력을 리턴한다. Component의 입력은 props, 출력은 Element가 된다. 따라서 Component를 마크업을 반환하는 하나의 자바스크립트 함수라고 생각할 수 있다.
컴포넌트는 고유한 로직과 모양을 가진 하나의 작은 UI 덩어리라고 표현할 수 있다. 다시 말해, 페이지를 구성하는 작은 단위이다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 조각으로 나누고, 각 조각을 상황에 따라 활용할 수 있다. 컴포넌트는 어플리케이션의 UI 엘리먼트를 렌더링, 관리, 업데이트할 때 사용한다.
컴포넌트의 장점
- 코드 양을 줄일 수 있다.
- 개발 시간을 줄일 수 있다.
- 유지 보수 비용이 줄어든다
함수형 컴포넌트
이전의 'React - 1' 포스팅에서 사용했던 App 컴포넌트가 함수형 컴포넌트이다.
함수형 컴포넌트의 구조
App.js
import './App.css';
function App() {
const name = 'react';
return <div className="react">{name}</div>;
}
export default App; // export default : 파일의 기본 컴포넌트 지정함수형 컴포넌트의 장점
- 클래스형 컴포넌트보다 선언하기 쉽다
- 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다
- 프로젝트를 완성하여 빌드한 후 배포할 때 파일 크기가 작다
함수형 컴포넌트의 단점
- state와 라이프사이클 API 사용이 불가능하다
=> Hooks 기능 도입으로 비슷한 작업이 가능하게 되었다
클래스형 컴포넌트
클래스형 컴포넌트의 구조
App.js
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를 반환해야 한다
컴포넌트 렌더링
뭔소리야..?
※ 리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hooks 사용을 권장하고 있다.
