# useEffect

196개의 포스트
post-thumbnail

Effects

React.useEffect() 에 대한 간략한 설명

약 3시간 전
·
0개의 댓글
post-thumbnail

react useEffect 무한루프 문제 해결하기 위한 노력

💥 react 초보의 삽질이 가득한 글입니다. 진짜 무한루프 문제를 해결하고 싶으신 분은 다른 글을 보시는 걸 추천react 프로젝트에서네비게이션을 login 전과 후에 따라 다르게 표현하고 싶었다.그러던 중 useEffect 무한루프 문제가 발생했다.당시 코드는 아

5일 전
·
0개의 댓글
post-thumbnail

React | useEffect Hook

Side Effect, useEffect, 의존성 배열(Dependancy Array), Clean up Effect

6일 전
·
0개의 댓글

React useEffect

모든 렌더링이 완료된 후 or 특정 값이 변경 되었을 때만 실행 되었을때 수행하기에 clean-up(정리함수) 타이머 제거 될 떄 사용.출처: https://ko.reactjs.org/docs/hooks-reference.html#cleaning-up-an-e

2022년 1월 16일
·
0개의 댓글
post-thumbnail

React-useEffect

state가 변경되면 모든 컴포넌트가 리렌더링된다.state값이 변경될때 리렌더링 되는 컴포넌트를 조작할수있다.useEffect의 첫번째 인자는 한번만 실행할 함수두번째 인자는 배열로 빈값을 넣거나 state 값을 넣어준다.두번째 인자 배열에 빈값이 아닌 state값이

2022년 1월 13일
·
0개의 댓글

React Props, Event, , useState, useEffect

1. Props 자식에게 부모가 넘겨주는 값.(단, 자식에서는 그 값을 변경할 수 없고 읽기만 가능함.) 2. State 2-1. 배열 비구조화 할당 2-2. useState 사용 예시

2022년 1월 13일
·
0개의 댓글
post-thumbnail

[KDT]FCFE - 8주3일 React Practice

: Higher Order Component ( 고차 컴포넌트 )HOC = function(컴포넌트) { return 새로운 컴포넌트;}컴포넌트를 받아 새로운 컴포넌트를 리턴하는 함수 이다.withRouter(컴포넌트) -> router에 의해 호출되지 않아도 matc

2022년 1월 12일
·
0개의 댓글

CleanUp

useEffect를 이용해서 컴포넌트가 생성될때는 물론 파괴될 때도 무언가를 할 수 있다.이 함수를 통해 컴포넌트가 언제 create 그리고 destroy됐는지 알 수 있다.위 코드는 아래의 코드와 같은 이야기를 한다.Hello 컴포넌트가 생성될 때 hiFn 이 실행되

2022년 1월 12일
·
0개의 댓글
post-thumbnail

Hook

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경 될 때 상호작용(Effect)을 하기 위해 사용합니다.기존에는 컴포넌트 내에서 State의 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트를 사용하여야 했습니다.다소 복잡한 클래스 컴포넌트를 보완하고 함수 컴포

2022년 1월 11일
·
0개의 댓글
post-thumbnail

EFFECTS-2

전체 코드 input창에 이벤트발생할때마다 API를 매번 새로 호출하고 있다. 매우 별로.검색을 예로 들면, console.log("SEARCH FOR", keyword);를 하면, 입력창이 변할때마다 인식하는건 좋은데,counter라는 state가 변할때도 검색이 되

2022년 1월 11일
·
0개의 댓글
post-thumbnail

EFFECTS-1 리렌더링되더라도 특정코드는 처음1번만 실행시키기

state에 변화가 생길때마다 렌더링은 매번 일어난다.만약 그게 싫다면?특정 코드는 첫번째 렌더링에서만 실행되게 하고 싶다면?예를 들어, "call an API"는 처음 실행될때, 그리고 onClick이 발생해 변화가 생길때마다 호출된다. 만약 처음 실행될때만 위의 콘

2022년 1월 11일
·
0개의 댓글
post-thumbnail

가위바위보

onclick 하면 value 값에 대한 값을 참조가능하다.whoWin 함수 ⇒ useCallback 을 사용해서 myturn이나 comturn이 바뀌게 되면 실행되게 한다. ⭐ whoWin을 사용하는 곳에서 useEffect를 사용했기 때문에 useCallback을

2022년 1월 10일
·
0개의 댓글
post-thumbnail

[React] ReactJS로 영화 웹 서비스 만들기 6

[React] ReactJS로 영화 웹 서비스 만들기 6

2022년 1월 7일
·
0개의 댓글
post-thumbnail

[React] fetch( )를 이용하여 API 호출하기 (feat.일기장)

💡fetch()란? 자바스크립트 내장 객체 (API 호출하는 역할) fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한다. ▶️ fetch()사용 방법

2022년 1월 6일
·
0개의 댓글
post-thumbnail

[React] useEffect( )로 Lifecycle이해하기 (feat.예제)

💡useEffect( )란? import React, { useEffect } from "react"; useEffect또한 React가 제공하는 기능 중 하나이므로, React에서 import받아와야 한다. 두개의 파라미터를 갖는것처럼보인다. 첫번째파라미터로는 콜

2022년 1월 6일
·
0개의 댓글
post-thumbnail

[React #12] The Effect Hook (feat.useEffect())

웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. useEffect hook은 바로 이럴 때 유용하게 쓸 수 있다. H

2022년 1월 5일
·
0개의 댓글
post-thumbnail

React.js 시작하기_useEffect()

useEffect()는 React의 side-effect 중 하나이다. 그리고 side-effect는 어떤 함수를 실행함에 따라 외부 값이 변화하는 현상을 말한다. 그렇기 때문에 개발자가 원하는 값을 바꾸는 것에 있어 유용하기도 하지만 원치 않는 값의 훼손을 불러올 수

2022년 1월 4일
·
0개의 댓글

[TIL] 0101

상태, 속성 값을 이용해 값을 계산할 때, 상태, 속성 값이 바뀌지 않았다면 재렌더링 시에도 기존 값을 쓰게 하는 것기존 값을 쓰는 경우부모 컴포넌트가 재렌더링 했을 시계산에 쓰이지 않은 다른 상태, 속성 값이 바뀌었을 시함수 선언이 재렌더링 될 때마다가 아니고, 필요

2022년 1월 2일
·
0개의 댓글
post-thumbnail

useEffect 총정리

Effect는 sideEffect(부작용, 함수 외부에 영향을 주는 행위)을 의미하는데 이 이름이 붙여진 이유는 컴포넌트를 렌더링하는 본래 자신의 일이 아닌, 외부의 상태를 변경하는 작업을 하기 때문입니다.대표적인 부작용 예시로는 API 호출, 이벤트 처리 함수 등록

2022년 1월 1일
·
0개의 댓글