useEffect 검색 결과

해당 글 2건

[React] 깜빡임 현상 해결 (useLayoutEffect, API호출)

분명 다 만들었지만, 보기엔 흉한 깜빡임 현상!! 이 글에선 두 가지 깜박힘 현상에 대해 다룰 것이다. 1. useEffect 호출에 의한 깜빡임 2. API 호출에 의한 깜빡임 1. UseEffect 호출에 의한 깜빡임 const [duckUrl, setDuckUrl] = useState(''); useEffect(() => { setDuckUrl('/duck.png'); }, []); Hook Flow에 의하면 DOM 배치 → 페인트 작업 → useEffect 호출 순서를 따른다. 따라서 useEffect로 이후 페인트 작업이 한 번 더 이루어짐에 따라(리페인트) 깜빡이는 현상이 나타난다. 2. UseLayoutEffect 을 통한 해결 const [duckUrl, setDuckUrl] = useSt..
🌕 Front/⚛️ React JS 2022. 3. 30. 13:02

[React Hook 시리즈 2]: useEffect()

1. useEffect 란? 컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다. 컴포넌트의 정보를 다른 데서 가져와 나중에 내용을 업데이트 한다거나, 네트워크 통신 등의 작업을 하는 작업들에 해당한다. DOM 업데이트, Browser Paint가 완료된 후에 UseEffect가 호출된다. 참고로 useEffect는 클래스 컴포넌트의 componentDidMount, componentDidUpdate 를 함수형 컴포넌트에서 구현한 것이다. 2. useEffect 사용하기 1) callback : render()함수가 실행될 때마다 호출되며, return ..
🌕 Front/⚛️ React JS 2021. 7. 22. 11:36