[React] 클래스형 & 함수형 컴포넌트의 생성과 차이, 장단점
📑 개요
컴포넌트 단위의 개발...
익숙해지면 괜찮다. 익숙하지 않을 땐 익숙해지는 과정이 귀찮을지도.
그치만 컴포넌트 단위로 하면 확실히 보기도 편하고 수정도 편해서 안 쓸 수가 없다.
처음에는 함수명으로 컴포넌트를 만드는 게 엄청 낯설게 느껴졌지만 지금은 너무나 편한 방식...!
자... 컴포넌트도 알아보러 가자🤗
🧶 Component 란?
특정 기능을 수행하는 작은 코드로 리액트로 만들어진 앱을 이루는 최소한의 단위이다.
컴포넌트 이름은 항상 대문자로 시작해야한다.
엄청 중요해 보이지 않는 내용인데 빨간 글씨로 한 이유...?
별 거 없다...
그냥 내가 코드 짤 때 오류가 났는데 왜 났지 하면서 헤맨 시간이 꽤 있다가 저걸 깨닫고 허망함에 눈물을 머금어서...
프로젝트를 시작할 여러분들은 그런 일이 없길 바라며.......😂
- 엘리먼트(Element)와 컴포넌트(Component)의 차이
Element
- React를 구성하는 가장 작은 단위로 Virtual DOM에서 실제 DOM 노드를 나타낸다.
- React를 렌더링하는데 사용되며 React element는 JSX로 표현된다.
const element = <div>Hello, World!</div>;
Component
- 재사용 가능한 UI 조각으로 자체적으로 독립적 기능을 수행하며 화면에서 특정 부분을 나타낸다.
- 코드의 재사용성과 유지보수성이 높아지고 복잡한 UI 관리가 쉬워진다.
// 함수형 컴포넌트 예시
function Hello() {
return <div>Hello, World!</div>;
}
엘리먼트는 UI의 작은 조각으로 React의 구성요소를 나타내고,
컴포넌트는 이러한 엘리먼트들을 구성하여 재사용 가능한 UI 조각을 만드는 도구이다.
- Component를 생성하는 방법
컴포넌트를 생성하는 방법에는 두 가지가 있다.
- 클래스형 컴포넌트
- 함수형 컴포넌트
함수형 컴포넌트는 단순히 JSX를 반환하는 JavaScript 함수이며,
클래스형 컴포넌트는 React.Component 클래스를 확장한 JavaScript 클래스이다.
클래스형 컴포넌트의 경우 현재 많이 사용하고 있지는 않으나, 이전 프로젝트의 유지보수를 위해 알아두어야 한다.
🧩 Class Component와 Functional Component
- 클래스형 컴포넌트(Class Component)
상태 관리나 라이프사이클 메서드가 필요한 경우 사용되며 React.Component 클래스를 상속받아서 만든다.
- 함수형 컴포넌트(Functional Component)
함수를 사용하여 정의되며 간단한 UI를 만들거나 상태 관리가 필요하지 않을 때 사용된다.
React 패키지에서 createElement 함수를 호출하지 않아도 된다.
이제 이 둘의 차이점을 예시와 함께 알아보자.
♦ Class Component와 Functional Component의 차이
- 선언 방식
클래스형 컴포넌트 (Class Component)
- class 키워드가 필요하다.
- Component를 상속받아야 한다.
- 화면에 표시하기 위한 render() 메서드가 반드시 필요하다.
import React, { Component } from 'react';
class MyClassComponent extends Component {
render() {
const { name } = this.props;
return <div>나는 {name}!</div>;
}
}
export default MyClassComponent;
함수형 컴포넌트 (Functional Component)
- 클래스형보다 간단한 코드를 작성할 수 있다.
- Component의 상속이 필요하지 않다.
- 함수 자체가 렌더 함수이므로 render() 메서드를 쓰지 않아도 된다.
기본 함수 방식과 화살표 방식 두 가지로 구현 가능하다.
import React from 'react';
function MyFunctionalComponent(props) {
const { name } = props;
return <div>나는 {name}!</div>;
}
export default MyFunctionalComponent;import React from 'react';
const MyFunctionalComponent = (props) => {
const { name } = props;
return <div>나는 {name}!</div>;
}
export default MyFunctionalComponent;
- State 사용 방식
클래스형 컴포넌트 (Class Component)
- 상태(State)를 관리하기 위해 this.state를 사용한다.
- constructor 메서드에서 초기 상태를 설정하고, 상태를 업데이트할 때에는 this.setState() 메서드를 사용한다.
import React, { Component } from 'react';
class MyClassComponent extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
함수형 컴포넌트 (Functional Component)
- React Hooks 중 하나인 useState를 사용하여 상태를 관리한다.
- useState 훅을 사용하여 상태를 정의하고, 반환된 상태와 업데이트 함수를 사용하여 상태를 업데이트한다.
import React, { useState } from 'react';
function MyFunctionalComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
- Props 사용 방식
클래스형 컴포넌트 (Class Component)
- this.props를 통해 부모 컴포넌트로부터 전달된 props를 참조한다.
import React, { Component } from 'react';
class MyClassComponent extends Component {
render() {
return <div>My name is {this.props.name}.</div>;
}
}
함수형 컴포넌트 (Functional Component)
- 함수의 매개변수로 props를 받아와서 사용한다.
import React from 'react';
function MyFunctionalComponent(props) {
return <div>My name is {props.name}.</div>;
}
- 이벤트 핸들링 차이
클래스형 컴포넌트 (Class Component)
- handleClick 메서드를 정의하고, 해당 메서드를 이벤트 핸들러로 사용한다.
- 메서드 적용 시 this를 붙여야 한다.
import React, { Component } from 'react';
class MyClassComponent extends Component {
handleClick = () => {
console.log('Button clicked');
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
함수형 컴포넌트 (Functional Component)
- handleClick 함수를 정의하고, 해당 함수를 이벤트 핸들러로 사용한다.
- 함수 적용 시 this를 붙이지 않아도 된다.
import React from 'react';
function MyFunctionalComponent() {
const handleClick = () => {
console.log('Button clicked');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
- LifeCycle 차이
React 컴포넌트는 생명주기를 갖고 있는데 이를 라이프사이클이라고 한다.
컴포넌트가 실행되거나 업데이트, 제거될 때 특정 이벤트가 발생한다.
컴포넌트는 생성(Mounting) -> 업데이트(Updating) -> 제거(Unmounting)의 생명주기를 갖는다.
클래스형 컴포넌트 (Class Component)
- LifeCycle API를 사용한다.
함수형 컴포넌트 (Functional Component)
- React Hook을 사용한다.
자세한 내용은 LifeCycle과 LifeCycle 메서드 포스팅 참고
🔗 클래스형 컴포넌트와 함수형 컴포넌트의 장단점
- 클래스형 컴포넌트의 장단점
장점
- 라이프사이클 메서드를 사용하여 라이프사이클 관리가 쉽다.
- 개발자가 객체 지향 프로그래밍 패러다임에 익숙하다면 this 키워드의 코드 작성이 편하다.
단점
- this 키워드와 라이프사이클 메서드 사용으로 함수형 컴포넌트에 비해 코드가 길고 복잡하며 가독성이 떨어질 수 있다.
- 인스턴스 생성 과정이 필요해 불필요한 메서드와 속성이 포함될 수 있어 함수형 컴포넌트에 비해 성능이 떨어질 수 있다.
- 함수형 컴포넌트의 장단점
장점
- 함수로만 이루어져 있어 코드가 간결하고 가독성이 좋으며 재사용성이 높다.
- 컴포넌트 상태 변화 없이 props와 함수를 입력 받아 화면을 그리므로 선언형 프로그래밍에 더 적합하다.
- 인스턴스 생성 과정이 없어 메모리 사용량이 줄어들고 렌더링 성능이 비교적 좋다.
- React Hook을 통해 라이프사이클 메서드와 같은 기능의 구현이 가능하며 상태 관리가 간편해졌다.
단점
- 기존 라이프사이클 메서드를 사용할 수 없다.
- 클래스형 컴포넌트보다 라이프사이클 관리가 복잡할 수 있다.
✨ 마무리
class형은 나도 이번에 제대로 봤다......
냅다 함수형으로 썼기 때문에........... 이래서 CS 공부하지...............
나중에 유지보수에 필요할 수도 있다고 하니 둘 다 잘 알아두자
- 요약
- 컴포넌트의 생성 방법
- 클래스형 컴포넌트
상태 관리나 라이프사이클 메서드가 필요한 경우 사용되며 React.Component 클래스를 상속받아서 만든다. - 함수형 컴포넌트
함수를 사용하여 정의되며 간단한 UI를 만들거나 상태 관리가 필요하지 않을 때 사용된다.
- 클래스형 컴포넌트
- 함수형 컴포넌트와 클래스형 컴포넌트의 차이점
- 선언 방식
- State 사용 방식
- Props 사용 방식
- 이벤트 핸들링 차이
- LifeCycle 차이