# useEffect

리액트 적응기 - useEffect
Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.useEffect는 class component의 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각할

React Hooks - useEffect
useEffect는 엄청 중요한 Hook이라고 한다. 리액트 컴포넌트가 렌더링(Mount, Update, Unmount)될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.useEffect 훅은 인자로 콜백함수를 받으며, 두 가지 형태를 기억하자1\. 첫번째
react useEffect
한동안 전역 상태 관리를 주로 해서 클론 코딩을 하거나 간단한 것들을 만들었더니, 바보같이도 리액트의 기본적인 useEffect가 정확히 어떻게 작동하는지를 잠시 망각 ? 하고 살았던 것 같다.요즈음 디자인 라이브러리 없이 마크업 연습도 하고, 리액트는 기본이고 추가로

[React] React의 라이프사이클 이해하기 (with useEffect)
state가 업데이트될 때 마다 렌더링이 새롭게 된다고 했는데 만약 아래와 같이 컴포넌트가 맨 처음 렌더링될 때 state를 업데이트하는 상황이면 어떻게 될까요?
useEffect에 대해 알아보기 [React]
렌더링 이후 Side Effect를 수행할 수 있게 해 줍니다. 여기서 Side Effect는 무엇일까요?함수형 프로그래밍에서는 Side Effect가 없는 순수한 함수를 만들어야 합니다.React 공식 문서에서는 데이터 가져오기, 구독 설정하기, 수동으로 React

useEffect의 배신
useEffect이놈을 이해하는것은 조금 어려운것같다..몇번의 아하모먼트 끝에 이해할수있었는데그 아하모먼트는 삽질 중에 찾아왔다.먼저 useEffect 두번째 인자 자리에 빈배열을 넣는것, 배열을 넣는것, 안넣는것 세가지 옵션이 있는데나는 계속 1, 혹은 2번 선택지만

React로 minishop 만들기(2)
useEffect 개념 + 활용 / 리액트에서 setTimeout 사용하기 / cleanup / if문 / 전환애니메이션
[React] 복잡한 함수 속에서 state 변화 즉각 반영하기
오늘은 간단하게 본문부터!복잡한 동작을 하는 함수가 실행되는 동안 유저에게 loading state 표기button click -> handleClick 함수 -> loading State = true -> 유저에게 표기위 처럼 코드를 짜면 handleClick을 눌렀

[패스트 캠퍼스 FE] 리액트 맛보기 - 3
1️⃣ 컴포넌트 상태 다루기2️⃣ 컴포넌트 사이드이펙트 다루기3️⃣ 커스텀 훅 만들기4️⃣ Hook Flow 이해하기공식문서useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예제: useSt
메인페이지(코인리스트) 상세페이지(해당코인)
메인 페이지 Coins.tsx /상세 페이지 Coin.tsxCoins.tsx 코드 최초 렌더링 시 데이터 정보 fetch 해옴data 예시

타입 스크립트에서 useEffect 안에서 API 통신하는 useAsync 커스텀 훅 만들기
평소 데이터 페치를 하면서 보통은 컴포넌트 내에서 함수를 만들어 개발을 하였다. 그런데 컴포넌트의 양이 많아지고 서버 개발을 하는 분이 종종 간단한 수정이 있으면 Axios를 볼 때가 있어서 함께 개발하는 하는데 피로감이 있어보였다. 나의 목표는 페이지가 떴을때 위의

[Udemy] React 기본 - 일기장 만들기(12) 최적화 완성
React.memo, useEffect, useCallback을 활용해 일기 목록 렌더링을 최적화

[무작정 따라하기] 너의 할 일은。React로 To Do List 만들기
ReactJS로 To Do List 만들기input 입력 값 15자로 제한하기To Do List 삭제하기To Do List 10개로 제한하기input창에서 onChange를 사용해 입력된 값을 toDo와 setToDo를 이용해 받는다. form 태그에 쌓여진 butto

[Udemy] React 기본 - 일기장 만들기(8) API 호출하기 : useEffect x fetch
API 호출해 더미 데이터를 일기장에 뿌려줍니다