# Effect Hook
[React] Effect Hook, UseEffect
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다.React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 한다.순수 함수(Pure function)는 입력으로
useEffect
https://ko.reactjs.org/docs/hooks-effect.htmlWhat does 'Use Effect' do?useEffect Hook을 이용해 React에게 component가 렌더링 이후에 어떤 일을 수행해야 하는지 지시사용자가 React
3.3.2 Effect Hook을 이용한 Todo 리스트 초기화
CORS 에러는 해결했지만 todo가 끝없이 나열된다.그 이유는리액트는 컴포넌트의 상태가 변하게 되면 렌더링을 한다.fetch를 사용한 API 호출은 비동기 호출이라서 응답이 올 때까지 기다리지 않는다.then()으로 이어진 함수가 차례차례 실행되고, setItem을
[React] Effect Hook
Side Effect 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 컴포넌트 내에서 fetch를 사용해 API를 가지고 오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effec
Effect Hook, Ajax 요청
오늘은 Effect Hook에 대해 알아보자!Effect Hook이란 무엇일까?React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정이다.함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 한다.React에서
[2022.10.12] Effect Hook, useEffect
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect가 있다고 한다.React에서 Side Effect가 발생하는 경우1\. 네트워크 요청을 하는 경우 (fetch API..)2\. 타이머 사용(setTimeout)3\. Loca
Effect Hook
학습 목표 Side effect가 어떤 의미인지 알 수 있다. React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분) Side effect의 예를 들 수 있다. Effect Hook을 이용해 비동기 호
노트 #54 | React - Effect Hook
React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정에 대해 학습합니다.Side Effect가 어떤 의미인지 알 수 있다.React 컴포넌트를 만들 때 Side Effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)Side Efeect의
[React] 클라이언트 Ajax 요청
React의 데이터 흐름여러 컴포넌트 사이에서 어떤 방식으로 데이터를 다루는지Effect Hook와 Ajax를 사용해 서버로부터 데이터를 받아오는 방법1-1 React 데이터 흐름1-2 State 끌어올리기 (Lifting State Up)2-1 Side Effect2
[개발자되기: 클라이언트 Ajax 요청] Day-30
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달받음 단방향 데이터 흐름(one-way data flow)(맞으면 state 아님)(맞으면 state 아님)(맞으면 state 아님)ex) 하위 컴포넌트의 클릭 이벤트가 부모의 상태를 바꾸어야만 하는 상황 =
[TIL : 23] 데이터 흐름의 이해, 비동기 요청 처리
React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.리액트의 특징 중 하나는 데이터는 위에서 아래로 하향식(top-down) 흐름을 갖는다는 것이다. 데이터를 전달하는 주체는 부모컴포넌트이고, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지
Effect Hook
<HOOK 사용코드 예시>최상위에서만 Hook을 호출합니다.React 함수 내에서 Hook을 호출합니다.빈 배열 넣기 : useEffect(함수, \[])빈 배열을 useEffect의 두 번째 인자로 사용하면, 이 때에는 컴포넌트가 처음 생성될때만 effect 함
[TIL 31] React Hooks: useEffect
리액트 공식 문서Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있다.Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.React 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하는 부수
[TIL] Day34- 데이터 흐름의 이해와 비동기 요청 처리
React 데이터 흐름React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.State 끌어올리기의 개념을 이해할 수 있다.상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가