리액트에서 컴포넌트를 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 두 컴포넌트의 장단점을 각각 살펴보자.
1, 클래스형 컴포넌트
- class 키워드로 시작
- component로 상속 받음
- render 함수를 사용해서 JSX를 반환
- props를 조회할 때 this키워드를 사용
import React, { Component } from 'react';
class Hello extends Component {
render() {
const { color, name, isSpecial } = this.props;
return (
<div style={{ color }}>
{isSpecial && <b>*</b>}
안녕하세요 {name}
</div>
);
}
}
export default Hello;
☑️ 클래스형 컴포넌트는 생명주기 메서드를 가지며 이 메서드를 오버라이딩 하여 특정 시점에 코드가 실행되도록 만든다
2023.04.30 - [React.js] - [React] 리액트의 생명주기(Life Cycle)
[React] 리액트의 생명주기(Life Cycle)
리액트 컴포넌트에는 Life Cycle(생명주기)이 존재한다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 이다. 이 생명주기 메서드들은
hamster801.tistory.com
2. 함수형 컴포넌트
- JSX를 return문을 사용해서 반환
- state를 사용할 수 없다
- 생명 주기 함수를 작성할 수 없다.
import React from 'react';
function Hello({ color, name, isSpecial }) {
return (
<div style={{ color }}>
{isSpecial && <b>*</b>}
안녕하세요 {name}
</div>
);
}
export default Hello;
☑️ 함수형 컴포넌트에서는 Hook을 이용해 생명주기에 원하는 동작을 조작합니다.
2023.04.30 - [React.js] - [React] React Hooks
[React] React Hooks
Hook은 React 버전 16.8부터 새로 추가된 요소이다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 📢 Hook 사용 규칙 - 최상위에서만 Hook을
hamster801.tistory.com
❔ 함수형 컴포넌트를 선호하는 이유
요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트 + Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트가 더 자주 쓰인다.
'React.js' 카테고리의 다른 글
[React] React Hooks (1) | 2023.04.30 |
---|---|
[React] 리액트의 생명주기(Life Cycle) (0) | 2023.04.30 |
[React] Redux 구조와 Toolkit 활용하기(feat.Flux pattern) (0) | 2023.04.28 |
[React] Component와 Rendering (0) | 2023.04.22 |
[React] state (0) | 2023.04.21 |