React useEffect

• Side Effect란?

  • React컴포넌트가 화면에 렌더링된 이후에 비동기적으로 처리되어야 하는 부수적인 효과.

    console.log()도 sideEffect의 일부이다.

  • 특징

    • block rendering
      alert(’’)는 확인을 누르기 전까지는 렌더링을 멈춤.
    • always trigger
      state를 재설정하게되면 React는 재 렌더링을 하게되는데 그때마다 sideEffect는 실시간으로 업데이트됨.
• useEffect란? useEffect는 리액트에서 기본제공되는 훅으로 첫 로딩때만 실행이되고 state에 의해 재렌더링을 막는 훅이다.

  • 기본 문법

    import {useEffect} from 'react'
    
    useEffect(() => {},[]);
    
    {} 실행시키고 싶은 함수나, 문법, 행동.
    
    [] 넣은 state가 실행될때만 useEffect내용을 
    	 실행함
    
    useEffect( () => {실행할 내용},
    [이 state가 실행될때만 위에 내용 실행시켜주세요!])
    
    []안에는 ,를 써서 여러가지상황에서 실행시킬수있음!
    []를 빼면 렌더링 될때마다 계속 실행됨!

• UI Rendering
  • 앱에서 프레임을 생성하여 화면에 표시하는 작업.
  • React에서는 useState의 set함수에 의해 변경되는순간 React는 재 렌더링을 함.
• Side Effect
  • React컴포넌트가 화면에 렌더링된 이후에 비동기적으로 처리되어야 하는 부수적인 효과.
  • 순서대로 처리되는게 아니라 나중에 처리 되어야 하는 일.
  • 렌더링을 막는다거나 원하지않는 상황에 멈추지않고 계속 실행되는 부분을 예로 들 수 있다.
  • 사용 예) 일단 메인 페이지를 불러오고 용량을 많이 차지하는 대용량 이미지라던가 , 복잡한 알고리즘을 갖고있는 함수를 실행시킬때 나중에 불러오도록 Side-Effect를 적용 시킬수있다.
• block rendering 막기
  • useEffect를 사용하면 렌더링 순위를 마지막으로 두어 다른 자바스크립트 문법들이 먼저 실행되고 마지막에 useEffect 훅을 실행함.

import {useEffect} from 'react'

export default function example() {
	console.log('render1')

	useEffect() => {
		alert('effect!')
	});

	console.log('render2')
}

이렇게 실행시킨다면 어떻게 나올까?

'render1' // 1순위
'render2' // 2순위
'effect!' // 3순위

자바스크립트는 위에서 부터 아래로 순서대로 렌더링됨.
하지만 useEffect훅을 통해 후순위로 밀려남,
이로써 렌더링을 막지않고 alert창을 띄울 수 있게됨!

• always trigger 막기

import {useEffect,useState} from 'react'

export default function example() {
	const [count, setCount] = useState();
	// 카운트 버튼을 누르면 count의 숫자가 1씩올라가는
	// useState 훅!
	console.log('render')
	
	 useEffect(() => {
		console.log('count')
	},[count])

	useEffect(() => {
		console.log('effect!')
	},[])
}

이렇게 실행시키면 콘솔에 어떻게 나올까?

'render'
'count'
'effect!'

처음 렌더링 될때는 한번씩 다 실행이됨.

버튼을 눌렀을때

'render'
'count'

count라는 state훅을 넣어놨기때문에 재실행이됨.
원하는 부분만 넣어서 재실행이 되도록 할수있음!

• clean up effect
  • 우리가 기존 페이지에서 다른페이지로 이동했을때, setInterval등 규칙적으로 돌아가는 함수가 계속 실행이 되고있어 트래픽을 계속 먹는 상황이 발생함, 그 함수가 필요없어지는 상황(페이지 이동)이 되면 중단시켜줄 필요성이 있음 그때 clean up effect를해줘야함.
  • 밑에 []에 state 함수를 넣게되면 그때에도 clean을 해주고 다시 실행됨!

import {useEffect,useState} from 'react'

export default function example() {
	
	 useEffect(() => {
		const interval = setInterval(() => {
			console.log('interval')
		},500);
// 0.5초 마다 콘솔에 'interval'이 계속나옴.

		return () => {
			console.log('end Interval')
			clearInterval(interval)
		}
// 페이지 이동시 인터벌을 종료시켜줌!
	},[])

}