useEffect (3) 썸네일형 리스트형 [week7] useEffect, customHook 안녕하세요 OB 김건휘입니다🌊. 이번 시간에는 useEffect 훅을 딥다이브 해보는 시간을 가져보도록 하겠습니다. 📌Effect란? 즉, effect는 컴포넌트가 렌더링된 이후 특정 작업을 수행하기 위한 도구를 의미한다. 이를 구현하기 위해 useEffect 훅을 사용하며, 이는 리액트 함수형 컴포넌트에서 부작용(side effect)을 처리하는 방식이다. 📌부작용(Side Effect)이란?부작용은 컴포넌트의 렌더링 외에 발생하는 모든 작업을 의미한다.API 호출 (데이터 가져오기/저장하기)구독 설정/해제 (실시간 통신, 이벤트 리스너 등)DOM 수정 (DOM 직접 접근)타이머 설정 (setInterval이나 setTimeout 사용) 🧐왜 useEffect의 호출을 두 번 수행할까?//App.. useEffect, 클린업 함수, useLayoutEffect, useRef ❓useEffect란useEffect : React 함수 컴포넌트에서 side effects를 수행하기 위해 사용되는 Hook. -> (side effects란 컴포넌트의 상태 변화, 외부 API 호출, 구독 및 구독 해제와 같은 작업을 뜻함.)즉, 어떤 state의 값이 변경되거나, 외부 API를 동기적으로 호출하는 등 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.💡 useEffect는 component가 mount 되었을 때, unmount 되었을 때, update 되었을 때 특정 작업을 처리할 수 있다.(useEffect를 통해 기존의 클래스형 컴포넌트에서 사용하던 생명주기(Life cycle) 메소드를 함수형 컴포넌트에서 사용할 수 있게 되었다.)하지만 .. [React] useEffect 훅과 의존성 배열 안녕하세요! 웹 파트 YB 김태욱입니다. 이번 3주차 세미나를 통해 배운 useEffect훅에 대해 더 공부해보고 아티클을 작성하게 되었습니다. 1.useEffect란?useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 1-1. 언제, 어떻게 사용할까?when- 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶을 때- 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때 How- useState와 마찬가지로 React에서 제공하는 훅이므로, import React,{useEffect} from "react";로 import 해서 사용한다. 1-2. useEffect 사용 예시//App.jsimport React, { useEffe.. 이전 1 다음
