[python] React Hooks를 사용한 상태 관리
React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로, 상태 관리는 React 애플리케이션의 중요한 부분입니다. 이 글에서는 React Hooks를 사용하여 상태를 관리하는 방법을 알아보겠습니다.
1. React Hooks란 무엇인가?
React Hooks는 함수형 컴포넌트에서 React 기능을 사용할 수 있도록 하는 기능입니다. 클래스형 컴포넌트에서만 사용할 수 있던 상태 관리와 라이프사이클 기능을 함수형 컴포넌트에서도 사용할 수 있게 해줍니다.
2. 상태 관리를 위한 useState Hook
import React, { useState } from 'react';
function Example() {
// "count"를 상태로 가지는 변수 "setCount"와 "count"의 초기값 "0"을 반환합니다.
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
위의 예제에서 useState Hook은 상태값과 해당 상태를 갱신할 수 있는 함수를 반환합니다. 이를 통해 상태를 관리하고 컴포넌트가 렌더링될 때 상태값을 유지할 수 있습니다.
3. 상태 관리를 위한 useEffect Hook
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// "count"가 변경될 때마다 effect를 호출합니다.
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect Hook은 부수 효과(Effect)를 수행할 수 있도록 해줍니다. 위의 예제에서는 useEffect Hook을 사용하여 count값이 변경될 때마다 문서 제목을 갱신하는 예제를 보여줍니다.
마무리
React Hooks를 사용하면 함수형 컴포넌트에서도 상탯값을 관리하고 부수 효과를 수행할 수 있습니다. 이를 통해 React 애플리케이션을 보다 간단하고 효율적으로 작성할 수 있습니다.