훅
-
[React] useState, useReducer hook개발공부/React 2024. 3. 2. 16:24
본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능..
-
원하는 타이밍에 동작해보기 (useEffect)카테고리 없음 2023. 11. 13. 15:35
오늘은 useEffect에 대해 공부해보자!! hook 중에서 사용하는게 어렵다고 생각하는 것 중 하나가 useEffect이다. 뭔가.. 확실하게 이해하고 사용한다는 느낌이 아니라서 이번에 공부해서 내 것으로 만들어보자!! useEffect 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 hook 3가지 상황에서 특정 작업을 처리할 수 있다! 컴포넌트가 mount 되었을 때 컴포넌트가 unmount 되었을 때 컴포넌트가 update 되었을 때 코드르 통해 살펴보자 import { useEffect } from "react"; // 1. 컴포넌트가 mount 되었을 때 useEffect(()=>{ console.log("mount!"); }, []); // 2. 컴포넌트가 unmount ..