1. Hooks란 무엇인가?
Hooks는 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태와 생명 주기를 쉽게 관리할 수 있게 해준다. 가장 자주 쓰는 두 가지 Hooks를 소개해보자(이 외에도 useMemo, useContext 등이 있다)
- useState: 컴포넌트의 상태(state)를 관리할 수 있는 hook . 클래스 컴포넌트에서 this.state 대신 쓰는 기능이다.
const [name, setName] = useState(''); // name이라는 상태를 만들고 초기값을 ''로 설정
2. useEffect: 렌더링 후 side effects를 처리할 수 있도록 설계된 hook. 컴포넌트가 처음 나타날 때나 업데이트될 때, 또는 사라질 때 특정 작업을 할 수 있게 해준다. 생명 주기를 대신한다고 생각하면 된다.useEffect는 두 번째 인자로 빈 배열([])을 넣으면 컴포넌트가 처음 나타날 때 한 번만 실행된다. 만약 상태가 변경될 때도 실행하고 싶다면, 그 상태를 배열에 넣으면 된다.
useEffect(() => { // 이 코드는 컴포넌트가 처음 나타날 때 실행된다. }, []);
2. React Hooks가 왜 필요한가?
먼저 React는 컴포넌트라는 작은 조각들을 모아서 화면을 만든다. 이 컴포넌트는 크게 두 가지 방식으로 만들 수 있다:
- 클래스 컴포넌트: 예전 방식으로 더 복잡하고 길지만, 다양한 기능을 제공한다.
- 함수형 컴포넌트: 더 간단하고 코드가 짧지만, 예전에는 기능이 제한적이었다.
React가 처음에는 클래스 컴포넌트만으로 복잡한 기능을 구현했지만, 코드가 길어지고 반복되는 부분이 많았다. 그래서 React 팀은 더 간단한 함수형 컴포넌트에서도 강력한 기능을 쓸 수 있도록 Hooks라는 기능을 만들었다.
3. 클래스 컴포넌트 vs 함수형 컴포넌트
클래스 컴포넌트 예시
import React, { Component } from 'react';
import Axios from 'axios';
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = { name: '' }; // state 초기화
}
// 컴포넌트가 처음 마운트될 때 (화면에 나타날 때)
componentDidMount() {
Axios.get('/api/user/name')
.then(response => {
this.setState({ name: response.data.name }); // API에서 받은 데이터를 state에 저장
});
}
render() {
return (
<div>
My name is {this.state.name}
</div>
);
}
}함수형 컴포넌트 + Hooks 예시
import React, { useState, useEffect } from 'react';
import Axios from 'axios';
export default function Hello() {
const [name, setName] = useState(''); // useState로 상태 관리
// useEffect로 생명 주기와 비슷한 기능 구현
useEffect(() => {
Axios.get('/api/user/name')
.then(response => {
setName(response.data.name); // API에서 받은 데이터를 state에 저장
});
}, []); // 빈 배열을 넣으면 처음 한 번만 실행
return (
<div>
My name is {name}
</div>
);
}비교
- 클래스 컴포넌트는 상태를 관리하기 위해 this.state, constructor, componentDidMount, render 와 같은 메서드를 각각 사용한다. 생명 주기 함수라는 개념도 필요하다.
- 반면, Hooks를 사용하는 함수형 컴포넌트는 useState와 useEffect만 있으면 훨씬 짧고 간단한 코드로 같은 기능을 구현할 수 있다.
+) React 생명 주기란?
React 컴포넌트는 화면에 나타날 때, 업데이트될 때, 사라질 때 특정 작업을 할 수 있다. 이를 생명 주기라고 부른다.
- Mounting(마운팅): 컴포넌트가 화면에 처음 나타날 때 (componentDidMount).
- Updating(업데이트): 컴포넌트가 변경되거나 다시 그려질 때 (componentDidUpdate).
- Unmounting(언마운팅): 컴포넌트가 화면에서 사라질 때 (componentWillUnmount).
이런 생명 주기를 클래스 컴포넌트에서는 각각의 함수로 관리했지만, Hooks를 사용하면 useEffect 하나로 해결할 수 있다.
4. Custom Hook (사용자 정의 훅)이란?
Custom Hook은 반복되는 로직을 하나의 함수로 만들어서, 여러 컴포넌트에서 쉽게 재사용할 수 있게 해주는 기능이다.
Custom Hook 예시: useAuth
import { useState, useEffect } from 'react';
import Axios from 'axios';
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
Axios.get('/api/user')
.then(response => {
setUser(response.data);
});
}, []);
return user;
}
// 이 Hook을 여러 컴포넌트에서 사용할 수 있다.
export default function Profile() {
const user = useAuth();
if (!user) return <div>Loading...</div>;
return <div>Welcome, {user.name}!</div>;
}Custom Hook의 장점
- 여러 컴포넌트에서 같은 로직을 반복하지 않고 재사용할 수 있다.
- 코드가 훨씬 깔끔해지고 유지보수가 쉬워진다.
5. 정리
- React Hooks는 함수형 컴포넌트에서 상태와 생명 주기를 간단하게 관리할 수 있는 도구다.
- 클래스 컴포넌트보다 코드가 짧고 이해하기 쉽다.
- useState로 상태를 관리하고, useEffect로 생명 주기 작업을 처리할 수 있다.
- Custom Hook을 이용하면 여러 컴포넌트에서 반복되는 코드를 재사용할 수 있다.
끝😊
'React' 카테고리의 다른 글
| [React] JSX Key 속성 이해하기 (1) | 2024.09.12 |
|---|---|
| [React] 리액트 동작과정과 최적화 (1) | 2024.09.11 |
| [React] 리액트에서 불변성(Immutability) 관리의 중요성과 방법 (0) | 2024.08.21 |
| [React] State란? (0) | 2024.08.20 |
| [React] Props란? (0) | 2024.08.16 |
