[javascript] 리액트 Hooks의 사용 방법과 종류
리액트 Hooks는 함수형 컴포넌트에서 상태 관리 등 여러 기능을 사용할 수 있게 해주는 기능입니다. 이번 글에서는 리액트 Hooks의 사용 방법과 주요 종류에 대해 알아보겠습니다.
목차
리액트 Hooks란 무엇인가?
리액트 Hooks는 함수형 컴포넌트에서 상태와 생명주기 함수를 이용할 수 있게 해주는 기능입니다. 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 사용할 수 있도록 해줍니다.
useState Hook
useState Hook은 상태를 관리할 수 있도록 해주는 Hook입니다. 이를 통해 함수형 컴포넌트에서도 간단히 상태를 추가하고 업데이트할 수 있습니다.
예시:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect Hook
useEffect Hook은 부수 효과를 수행할 수 있도록 하는 Hook입니다. 컴포넌트의 렌더링 이후에 특정 작업을 수행하고자 할 때 사용됩니다.
예시:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useContext Hook
useContext Hook은 리액트의 Context를 사용할 수 있도록 하는 Hook으로, 컴포넌트 간에 데이터를 전달할 수 있게 해줍니다.
예시:
import React, { useContext } from 'react';
import MyContext from './MyContext';
function Example() {
const value = useContext(MyContext);
// 이제 MyContext.Provider로부터 전달된 value를 사용할 수 있음
// ...
}
커스텀 Hook
커스텀 Hook은 여러 다른 Hook을 사용하여 필요한 기능을 캡슐화한 함수입니다. 자주 사용되는 로직을 한 곳에 모아 재사용할 수 있도록 해줍니다.
예시:
import React, { useState } from 'react';
function useExample(initialValue) {
const [value, setValue] = useState(initialValue);
function increment() {
setValue(value + 1);
}
return { value, increment };
}
function Example() {
const { value, increment } = useExample(0);
return (
<div>
<p>Value: {value}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
결론
리액트 Hooks는 함수형 컴포넌트에서도 다양한 기능을 사용할 수 있게 해주어 개발자들에게 많은 편의를 제공합니다. 각각의 Hooks를 적절히 활용하여 보다 효율적이고 유지보수가 쉬운 컴포넌트를 만들 수 있습니다.
이상으로 리액트 Hooks의 사용 방법과 주요 종류에 대해 살펴보았습니다. 감사합니다.