React는 UI를 구성하는 컴포넌트를 중심으로 개발하는 JavaScript 라이브러리입니다. 컴포넌트는 재사용 가능하고, 각각의 상태를 가지며, 독립적으로 UI를 구성할 수 있는 중요한 구성 요소입니다. 본 글에서는 React 컴포넌트의 종류와 컴포넌트의 라이프사이클에 대한 깊이 있는 설명을 제공하겠습니다.
1. React 컴포넌트의 종류
React 컴포넌트는 크게 두 가지 종류로 나눌 수 있습니다: 클래스형 컴포넌트와 함수형 컴포넌트입니다.
1.1 클래스형 컴포넌트 (Class Components)
클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의됩니다. 이들 컴포넌트는 React.Component를 상속받아야 하며, render 메서드를 구현하여 UI를 반환합니다.
import React, { Component } from 'react';
class MyClassComponent extends Component {
render() {
return <h1>안녕하세요, 클래스형 컴포넌트입니다!</h1>;
}
}
export default MyClassComponent;
클래스형 컴포넌트는 상태(state)를 관리할 수 있으며, 다양한 생명주기 메서드를 사용할 수 있다는 장점이 있습니다.
1.2 함수형 컴포넌트 (Functional Components)
함수형 컴포넌트는 더 간단하고 간결하게 UI를 정의할 수 있는 방법입니다. React 16.8부터는 Hooks를 이용하여 상태와 생명주기 메서드를 사용할 수 있게 되었습니다.
import React, { useState } from 'react';
const MyFunctionalComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>현재 카운트: {count}</h1>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
export default MyFunctionalComponent;
함수형 컴포넌트는 가독성이 좋고, 불필요한 복잡성을 줄일 수 있는 장점이 있습니다.
2. React 컴포넌트의 라이프사이클
React 컴포넌트는 생명주기(lifecycle)에 따라 여러 단계로 구성됩니다. 이 생명주기는 주로 렌더링, 업데이트, 언마운트와 같은 단계로 나눌 수 있습니다.
2.1 생명주기 메서드 (Lifecycle Methods)
클래스형 컴포넌트에서는 다음과 같은 주요 생명주기 메서드를 사용할 수 있습니다:
constructor: 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정할 수 있습니다.componentDidMount: 컴포넌트가 DOM에 삽입된 후 호출됩니다. API 호출이나 DOM 초기화와 같은 부수 효과를 수행할 수 있습니다.shouldComponentUpdate: 새로운 props나 state가 들어올 때 컴포넌트를 업데이트할지 결정합니다. 성능 최적화에 유용합니다.render: 컴포넌트의 UI를 결정하는 메서드입니다. 반드시 return 문이 있어야 합니다.componentDidUpdate: 컴포넌트가 업데이트된 후 호출됩니다. 이전 상태와 비교하여 추가적인 부수 효과를 수행할 수 있습니다.componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출됩니다. 정리 작업을 수행할 수 있습니다.
아래는 클래스형 컴포넌트에서 생명주기 메서드를 사용하는 예제입니다:
import React, { Component } from 'react';
class MyClassComponent extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
console.log('컴포넌트가 마운트되었습니다.');
}
componentDidUpdate(prevProps, prevState) {
if (this.state.count !== prevState.count) {
console.log('카운트가 업데이트되었습니다.');
}
}
componentWillUnmount() {
console.log('컴포넌트가 언마운트됩니다.');
}
render() {
return (
<div>
<h1>현재 카운트: {this.state.count}</h1>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>증가</button>
</div>
);
}
}
export default MyClassComponent;
2.2 Hooks를 이용한 생명주기 관리 (Using Hooks for Lifecycle Management)
함수형 컴포넌트에서는 useEffect 훅을 사용하여 생명주기 메서드를 관리할 수 있습니다. useEffect는 컴포넌트가 마운트, 업데이트, 언마운트되는 시점에 실행되는 코드를 정의할 수 있게 해줍니다.
import React, { useState, useEffect } from 'react';
const MyFunctionalComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('컴포넌트가 마운트되었습니다.');
return () => {
console.log('컴포넌트가 언마운트됩니다.');
};
}, []);
useEffect(() => {
console.log('카운트가 업데이트되었습니다.');
}, [count]);
return (
<div>
<h1>현재 카운트: {count}</h1>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
export default MyFunctionalComponent;
위 예제에서 첫 번째 useEffect는 컴포넌트가 마운트될 때만 실행되고, 두 번째 useEffect는 카운트가 변경될 때마다 실행됩니다.
3. 정리
React 컴포넌트는 그 종류에 따라 여러 가지 방식으로 구현될 수 있으며, 각기 다른 생명주기 메서드를 통해 컴포넌트의 상태를 관리할 수 있습니다. 함수형 컴포넌트는 Hooks를 통해 간단하게 상태와 생명주기를 관리할 수 있는 기능을 제공하며, 이는 더 깔끔하고 효율적인 코드 작성을 가능하게 합니다.
React를 시작하는 데 있어 컴포넌트의 종류와 생명주기를 이해하는 것은 매우 중요합니다. 이번 글이 React 컴포넌트에 대한 이해를 확고히 하는 데 도움이 되었기를 바랍니다.