useEffect ?
useEffect(()=>{},)
인자 : 콜백함수
렌더링 될때마다 실행
useEffect(()=>{},[])
인자 : 콜백함수 , 의존성 배열
화면에 첫 렌더링 될때 , 배열 안의 값이 바뀔 때
기본적으로 리액트는 매 렌더링 이후에 효과들을 재적용한다.
First Render(number = 0)
순서
- Component : 리액트야 이 HTML < span >You clicked 0 times)< /span >
결과를 렌더링 해. 그 이후에 document.title = You clicked 0 tiems 효과를 실행해
- React : 브라우저야 DOM을 업데이트 하기 위해 몇 가지 변경사항이 있어
< span >You clicked 0 times)< /span >
- Browser : 변경사항들을 적용해서 화면에 표시한다.
하지만 useEffect 자체는 모든 렌더링에서 실행되는 문제가 있다.
내부에 무언가를 쓸때마다 구성 요소가 다시 렌더링 된다.
이 때문에 종속성을 사용해야한다.
종속성 :
useEffect(()=>{},[number])
두번째 인자에 원래 의존하고 있던 [number]를 넣어줌으로써
처음에 렌더링 시 실행하고 number값이 변경될 때 다시 실행하겠다는 의미이다.
++ 추가적으로 제목과 같이 변경되지 않고 초기에 한번만 렌더링하고 싶을 땐 [] 빈 배열을 넣어주면 된다.
기본형 참조형
여기서 잠깐 기본형과 참조형에 대해 짚고 넘어가겠다.
아주 예전 자바스크립트 신생아 시절 3단계중 1단계 시절에 작성한 적이 있던거 같다.
기본형 비교
const a = "string"
const b = "string"
이렇게 비교를 했을 때의 불리언 값은
a === b ?
true가 나오게 된다.
기본형인 문자열 숫자 불리언 null undefined 와 같은 경우는 값을 가지고 비교하기 때문에 이러한 결과들이 true이 된다.
참조형 비교
const x = {name : "gunho"}
const y = {name : "gunho"}
이렇게 비교하게 된다면 어떤 결과가 나올까?
false가 나오게 된다.
참조형인 객체 , 함수 , 배열의 경우는 각각의 값을 가지고 비교하는게 아니라
메모리 주소를 가지고 비교하기 때문에 값은 같아도 false인 결과가 나오게 되는 것이다.
쉽게 말해 바구니 안의 과일이 같다해도 바구니가 서로 같냐고 물어보면 당연히 아닌 느낌이다.
자 갑자기 이 얘기를 왜 했냐면 그 생각을 응용해서
useEffect의 두번째 인자를 생각해볼 수 있는 것이다.
내가 의존성 배열로 넣어준 데이터가 참조형 인 경우 값 자체가 바뀌지 않았다해도
리렌더링 시에 새로운 메모리에 데이터가 저장되므로 바뀐걸로 인지해 useEffect가 실행된다.
이걸 방지하기 위해 앞서 작성했던 useMemo를 사용할 수 있다.
업데이트 방식
정상적인 업데이트 방식을 사용하는 것이 중요하다.
const [number, setNumber] = useState(0)
useEffect(()=>{console.log(“effect”)
setInterval(()=>{
// setNumber(number +1) x
setNumber(prev=>prev+1)}, 1000)}, [])
동작 순서
useEffect(()=>
{
console.log(“effect runs”)
//return a clean up function
return()=>{
console.log(“wait! Before running the effect, I should clean here!”)
console.log(“okey done ! You can run !”)}
},[toggle])
화면 렌더 후 토글 버튼을 클릭했을 때 동작 순서
첫번째 콘솔이 렌더가 된다. console.log(“effect runs”)
클린업 콘솔 실행
return()=>{
console.log(“wait! Before running the effect, I should clean here!”)
console.log(“okey done ! You can run !”)}
이후 토글에 등록해놓은 기능 실행
