useEffect

TIL/React

리액트 StrictMode 때문에 useEffect가 두 번 호출돼서 로그인 에러가 나서 짜증나서 쓰는 글

리액트 개발자라면 누구나 한번쯤은 겪었을...StrictMode 때문에 useEffect가 두 번 호출되는 문제! 그냥 삭제하면 안되는걸까? StrictMode 공식문서공식문서를 보면서 정확히 어떤 일을 하는지 다시 알아보자. 1. 이중 렌더링리액트는 작성하는 모든 컴포넌트가 순수 함수라고 가정한다. 즉 컴포넌트를 두번씩 실행시켜서 같은 결과를 생성하는지 확인하는 것! 2. Effect 두 번 실행원래 useEffect의 셋업은 컴포넌트가 마운트 될 때 실행, 클린업은 언마운트될 때 실행된다. 그리고 의존성 배열에 있는 값이 변경되면 둘 다 다시 실행된다. 엄격모드에서는 이런 셋업+클린업 사이클을 한번 더 한다. 3. ref 콜백 두 번 실행ref콜백이 뭐지... ref는 그냥 객체 넘겨주는거 아님? ..

TIL/React

[240205] 리액트 라이프사이클, useEffect

리액트 라이프 사이클이란? 리액트 컴포넌트의 탄생, 변화, 죽음 클래스형 컴포넌트의 라이프 사이클 1. Mount 컴포넌트가 화면에 추가될 때 Render phase constructor() getDerivedStateFromProps() render Commit phase 리액트가 DOM 업데이트 componentDidMount() 2. Update 컴포넌트가 새로운 prop, 상태를 받을 때 Render phase New props, setState(), forceUpdate() shouldComponentUpdate() 에서 true 반환하는 경우 + forceUpdate() render Pre-Commit Phase getSnapShotBeforeUpdate() Commit phase 리액트가 D..

햄oOoOo
'useEffect' 태그의 글 목록
상단으로

티스토리툴바