React Hook을 사용하여 카운터 앱 만들기

리액트 훅스는 리액트 16.8에서 소개되었으며, 개발자들이 클래스 구성 요소를 사용하는 대신 기능 구성 요소에서 상태 및 수명 주기 방법을 사용할 수 있게 한다. 이 기사에서는 React Hooks를 사용하여 간단한 카운터 애플리케이션을 만들 것입니다.

시작하려면 반응 라이브러리에서 useState 및 useEffect 후크를 가져와야 합니다. useState 후크를 사용하면 기능 구성 요소의 상태를 관리할 수 있고 useEffect 후크를 사용하면 데이터 가져오기 또는 DOM 업데이트와 같은 부작용을 처리할 수 있습니다.

먼저 초기 값이 0인 useState 후크를 사용하여 "count"라는 새 상태 변수를 만들 것입니다.

 

const [count, setCount] = useState(0);

 

다음으로, 우리는 두 개의 버튼을 만들 것입니다. 하나는 카운트를 증가시키는 버튼이고 하나는 카운트를 감소시키는 버튼입니다.

<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>

그런 다음 카운트 상태 변수를 참조하여 현재 카운트를 표시합니다.

<p>Current Count: {count}</p>

또한 useEffect 후크를 사용하여 현재 개수를 로컬 저장소에 저장하여 사용자가 페이지를 새로 고칠 때에도 유지할 수 있습니다.

useEffect(() => {
    localStorage.setItem("count", count);
}, [count]);

또한 useEffect 후크를 사용하여 구성 요소의 초기 렌더링 중에 로컬 저장소에서 이전 카운트를 검색할 수도 있습니다.

useEffect(() => {
    const previousCount = localStorage.getItem("count");
    if (previousCount) {
        setCount(previousCount);
    }
}, []);

결론적으로, 리액트 훅스는 개발자들이 기능적인 구성 요소에서 상태를 관리하고 부작용을 처리할 수 있도록 하여, 더 효율적이고 이해하기 쉽게 만든다. useState 후크를 사용하면 상태 변수를 만들고 업데이트할 수 있으며 useEffect 후크를 사용하면 데이터 가져오기 또는 DOM 업데이트와 같은 부작용을 처리할 수 있습니다. 코드 몇 줄만으로 현재 카운트를 증가, 감소 및 로컬 스토리지에 저장할 수 있는 완전한 기능의 카운터 애플리케이션을 만들 수 있었습니다.

리액트 훅스는 아직 비교적 새롭지만 단순함과 유연성으로 개발자들 사이에서 빠르게 인기를 얻고 있다는 점에 주목할 필요가 있다. Hooks를 사용하면 더 적은 복잡성으로 더 유지보수 가능하고 테스트 가능한 코드를 작성할 수 있습니다.

이 튜토리얼에서는 React Hooks를 사용하여 카운터 응용 프로그램을 만드는 방법에 대한 기본 사항을 다루었지만, 아직 더 많은 것을 살펴볼 수 있습니다. 예를 들어 useContext 후크를 사용하여 여러 구성 요소에 걸쳐 상태를 공유하거나 useReducer 후크를 사용하여 복잡한 상태 전환을 처리할 수도 있습니다.

어쨌든 리액트 훅스는 리액트에서 국가 관리에 대한 우리의 생각을 확실히 바꿀 것이며, 가능한 한 빨리 익숙해지기 시작하는 것이 중요합니다.

 

React Hooks
State management
Functional Components
Counter app
useState
useEffect
local storage
JavaScript
web development
front-end development