반응형 Hooks를 활용한 상태 관리3 11. Hooks를 활용한 상태 관리 - 3 기타 사용 가능한 Hooks 소개 (useReducer, useContext 등) React에서는 useState와 useEffect와 같은 기본 훅 외에도 다양한 커스텀 훅을 제공합니다. 이번 글에서는 주요 커스텀 훅 중에서 useReducer와 useContext를 중점적으로 다뤄보겠습니다. useReducer 훅 소개 useReducer 훅은 복잡한 상태 로직을 관리하기 위해 사용됩니다. useState 대신 사용되며, 상태 업데이트 로직을 컴포넌트 외부에서 정의할 수 있습니다. import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (acti.. 2024. 2. 18. 10. Hooks를 활용한 상태 관리 - 2 useEffect 훅을 이용한 부수 효과 관리 React 함수형 컴포넌트에서 부수 효과를 다루기 위해 제공되는 useEffect 훅은 매우 강력하면서도 다양한 상황에서 활용될 수 있습니다. 이번 글에서는 useEffect 훅의 핵심 개념과 실제 활용법에 대해 자세히 알아보겠습니다. useEffect 훅 소개 useEffect 훅은 React 컴포넌트의 렌더링 사이에 발생하는 작업을 수행할 수 있게 해주는 특수한 목적의 훅입니다. 주로 데이터 가져오기, 구독 설정, 수동으로 컴포넌트 업데이트 등의 작업을 다룹니다. useEffect 훅의 사용법 useEffect는 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 등 특정 상황에서 작업을 수행하도록 설정할 수 있습니다. import React, { u.. 2024. 2. 18. 9. Hooks를 활용한 상태 관리 - 1 useState 훅을 이용한 상태 관리 React의 함수형 컴포넌트에서 상태를 관리하기 위해 useState 훅을 사용할 수 있습니다. 이번 포스트에서는 useState 훅의 개념과 활용 방법에 대해 알아보겠습니다. useState 훅 소개 useState 훅은 React 함수형 컴포넌트에서 상태를 추가하고 관리할 수 있는 기능을 제공합니다. 이를 통해 함수형 컴포넌트에서도 클래스형 컴포넌트와 마찬가지로 상태를 사용할 수 있습니다. useState 훅의 사용법 useState 훅은 배열을 반환하며, 배열의 첫 번째 요소는 현재 상태값이고, 두 번째 요소는 상태를 변경하는 함수입니다. 다음은 useState 훅을 사용하는 간단한 예시입니다. import React, { useState } from 'rea.. 2024. 2. 18. 이전 1 다음 반응형
