[React] 클래스형 컴포넌트 & 함수형 컴포넌트
리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있습니다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있습니다.
필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 특징에 따라 잘 사용하는게 중요합니다.
컴포넌트는 단순한 템플릿 이상의 기능을 수행합니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있습니다.
컴포넌트의 목적에 따라 프리젠테이션(presentational) 컴포넌트와 컨테이너(container) 컴포넌트로 나누어서 사용합니다.
프레젠테이셔널 컴포넌트
- View 만을 담당하는 컴포넌트이다. (UI를 작성한다)
- 이 컴포넌트 안에서는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 둘 다 사용할 수 있다.
- 리덕스 스토어에 직접적으로 접근하지 않고 props로만 데이터, 함수를 가져온다.
- 순수한 컴포넌트로 state를 사용하지 않으며 state가 있을 경우 데이터가 아닌 UI에 대한 state여야 한다.
- 주로 함수형 컴포넌트로 작성된다.
컨테이너 컴포넌트
- 다른 프레젠테이션 컴포넌트나 컨테이너 컴포넌트를 관리한다.
- 내부에 DOM 엘레멘트를 (UI) 작성하지 않는다. (사용하는 경우 감싸는 용도)
- 스타일을 가지고 있지 않는다.
- 스타일은 모두 프레젠테이셔널 컴포넌트 내부에 정의되어야 한다.
- 상태를 가지고 있고 리덕스에 직접 접근하여 데이터를 가져온다.
- dispatch를 하는 함수를 여기서 구현한다.
함수형 컴포넌트
import React from 'react';
function App() {
const name = '리액트';
return <div>{name}</div>;
}
export default App;선언방식
-
state, lifeCycle 관련 기능사용 불가능하다. [Hook을 통해 해결]
-
클래스형보다 메모지 자원을 덜 사용한다.
-
컴포넌트 선언이 편하다.
이벤트 핸들링
-
const + 함수 형태로 선언해야 한다.
-
요소에 적용할때 this가 필요없다.
props
- props를 불러올 필요 없이 바로 호출 할 수 있다.
props는 프로퍼티(properties)를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 표현입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 그리고 경우에 따라서 propTypes 컴포넌트 속성을 통해 props의 타입을 지정해 줄 수도 있습니다.
타입스크립트를 사용한다면 굳이 propTypes를 사용하지 않아도 타입 체크를 할 수가 있습니다.
클래스형 컴포넌트의 경우 render 함수에서 this.props를 조회해서 사용할 수 있습니다.
클래스형 컴포넌트
import React, { Component } from 'react';
class App extends Component {
render() {
const name = '리액트';
return <div>{name}</div>;
}
}
export default App;선언방식
-
class 키워드 필요
-
Component로 상속을 받아야한다.
-
render() 메소드가 반드시 필요하다.
-
state, lifeCycle 관련 기능사용이 가능하다.
-
함수형보다 메모리 자원을 더 사용한다.
-
임의 메소드를 정의할 수 있다.
이벤트 핸들링
-
함수 선언시 화살표 함수로 바로 선언 가능하다.
-
요소에 적용할때 this.를 붙여줘야한다.
props
- this.props로 통해 값을 불러올 수 있다.
function BlackDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: function() {
console.log(this.name + ': 멍멍!');
}
}
}
const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!
function WhiteDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: () => {
console.log(this.name + ': 멍멍!');
}
}
}
const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!function()을 사용하면 검둥이가 나타나고, () => {} 를 사용하면 흰둥이가 나타납니다. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.
