들어가기에 앞서
참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 지적 사항은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
리액트 훅(React Hooks)은 리액트에서 상태(state)와 생명주기 함수(lifecycle functions)를 함수 컴포넌트 안에서 사용할 수 있게 해주는 기능입니다. 클래스 컴포넌트가 가지고 있는 상태 관리 및 생명주기 관련 기능을 함수 컴포넌트에서도 사용할 수 있도록 해주는 것이 주요 목적입니다. 이 글에서는 리액트 훅의 기본 개념과 주요 특징에 대해 살펴보겠습니다.
1. 리액트 훅의 기본 개념
앞서 리액트 훅은 “상태(state)와 생명주기 함수(lifecycle functions)를 함수 컴포넌트 안에서 사용할 수 있게 해주는 기능”이라고 하였습니다. 저는 처음에 이 개념들이 안 와닿아서 이해가 잘 되지 않았습니다. 그러므로, 이 두 개념에 대해 보다 상세히 설명해보겠습니다.
상태는 컴포넌트가 가지고 있는 데이터입니다. 예를 들어, 시계 컴포넌트는 현재 시간을 상태로 가질 수 있습니다. 또한, 상태는 컴포넌트 안에서 바뀔 수 있습니다. 시계 컴포넌트는 매 초마다 현재 시간을 업데이트합니다. 상태가 바뀌면, 컴포넌트는 다시 그려집니다. 다시 말해, 시계 컴포넌트는 상태가 바뀔 때마다 화면에 새로운 시간을 보여줍니다.
상태를 관리하는 방법은 컴포넌트의 종류에 따라 다릅니다. 클래스형 컴포넌트는 this.state와 this.setState를 사용하고, 함수형 컴포넌트는 useState라는 훅을 사용합니다.
생명주기 함수는 컴포넌트가 생성(mounting)되고, 업데이트(updating)되고, 제거(unmounting)될 때 자동으로 호출되는 함수입니다. 컴포넌트의 상태가 바뀌거나, 부모 컴포넌트가 다시 그려질 때, 컴포넌트는 업데이트됩니다. 컴포넌트가 화면에서 사라질 때, 컴포넌트는 제거됩니다.
생명주기 함수를 사용하면, 컴포넌트가 특정 단계에 진입했을 때 원하는 작업을 수행할 수 있습니다. 예를 들어, 컴포넌트가 생성될 때, 웹사이트에서 데이터를 가져오거나, 타이머를 설정하거나, 이벤트 리스너를 등록할 수 있습니다. 컴포넌트가 업데이트될 때, 상태나 속성이 바뀐 것에 따라 추가적인 작업을 할 수 있습니다. 컴포넌트가 제거될 때, 타이머를 해제하거나, 이벤트 리스너를 제거하거나, 메모리를 정리할 수 있습니다.
생명주기 함수를 사용하는 방법도 컴포넌트의 종류에 따라 다릅니다. 클래스형 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 메서드를 사용하고, 함수형 컴포넌트는 useEffect라는 훅을 사용합니다. useEffect는 컴포넌트가 생성되고, 업데이트되고, 제거될 때 모두 호출되는 특별한 함수입니다.
2. 주요 특징
2.1 함수 컴포넌트에서 상태 관리
리액트 훅을 사용하면 함수 컴포넌트에서도 상태를 관리할 수 있습니다. useState 훅을 사용하여 간단하게 상태를 설정하고 업데이트할 수 있습니다.
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>
);
}
JavaScript
복사
2.2 생명주기 관리
useEffect 훅을 사용하여 함수 컴포넌트의 생명주기에 특정 동작을 추가할 수 있습니다. componentDidMount, componentDidUpdate, componentWillUnmount 등의 라이프사이클 메서드와 비슷한 기능을 제공합니다.
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>
);
}
JavaScript
복사
3. 결론
리액트 훅은 함수 컴포넌트에서도 상태 관리와 생명주기 관리를 할 수 있도록 도와줍니다. 이를 통해 함수 컴포넌트의 사용성과 재사용성을 향상시키며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 따라서 리액트 개발을 할 때 훅을 적극적으로 활용하는 것이 좋습니다.