useEffect4 [리액트] 컴포넌트 렌더링시 useEffect 한번만 실행되도록 바꿔주기 리액트에서 컴포넌트가 렌더링되면 useEffect가 두번 실행된다. 이는 개발 단계에서 디버깅하기 편하라고 만들어준 자체 기능이기 때문에 엔드 프로덕트에서는 필요 하지 않고 개발시에만 사용된다. index.js index.js에 있는 태그는 리액트에서 컴포넌트가 마운트 될때 useEffect 함수를 2번 실행시킨다. 해당 태그는 리액트 전체에 디버깅을 위한 절차를 추가해주는 태그로, useEffect 의 이상동작을 감지하고자 2번 실행시키도록 설정되어져 있다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals .. 2022. 8. 23. [리액트] useEffect 4가지 사용법 간단 정리 mount 1. 컴포넌트가 처음 렌더링될때 useEffect(()=> { console.log("컴포넌트가 처음으로 브라우저에 나타날때 호출") }, []) mount + update 2. 컴포넌트가 처음 렌더링될때 & 컴포넌트가 다시 렌더링이 될때 useEffect(()=> { console.log("컴포넌트의 초기렌더링 & 컴포넌트의 리렌더링시 호출") }) mount + update 3. 컴포넌트가 처음 렌더링될때 & 특정 props, states가 업데이트되서 컴포넌트가 다시 렌더링이 될때 useEffect(()=> { console.log("컴포넌트의 초기렌더링 & 배열안 데이터가 업데이트되면서 컴포넌트의 리렌더링시 호출") },[데이터]) unmount 4. 컴포넌트가 사라질 때 & 사라기지 .. 2022. 8. 23. [리액트] 라이프사이클 useEffect와 componentDidMount, componentDidUpdate, componentWillUnmount 비교하기 1. mount 컴포넌트가 브라우저에 렌더링될 때 실행 componentDidMount componentDidMount() { // 렌더링 시 실행될 코드 } useEffect와 빈배열 useEffect(컴포넌트가 브라우저에 렌더렝될때 실행할 함수, []); 2. update 컴포넌트 내부 특정 요소가 업데이트될 때 실행 componentDidUpdate componentDidUpdate(prevProps, prevState) { // 업데이트 되기 이전의 Props, State 값을 받아옴 // 업데이트 된 값과, 업데이트 되기 이전의 값을 직접 비교해서, 함수를 실행시킴 // 모든 props, state 값중 하나라도 변경사항이 있을 경우 실행할 코드를 이곳에 넣는다 if (this.props.num.. 2022. 8. 9. [리액트] useEffect 훅을 사용해서 데이터 로딩 후에 실행하고 싶은 로직 구현하기 useEffect가 실행되는 시점 1. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 요소가 업데이트될 때) useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수); 2. mount (컴포넌트가 브라우저에 표시될 때) useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수, []); 3. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 특정 요소가 업데이트될 때) useEffect(배열에 있는 요소가 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수 또는 State]); 4. unmount (컴포넌트가 사라질 때) useEffect(() => {return 컴포넌트가 사라지기 전에 실행할 함수}) 예제 imp.. 2022. 8. 5. 이전 1 다음
