[React] Lifecycle 과 useEffect
Lifecycle 컴포넌트도 사람처럼 태어나고 죽는다라는 의미?!
페이지에 컴포넌트가 장착되기도 하고 (mount)
가끔 컴포넌트가 업데이트도 되고(재랜더링) (update)
필요 없으면 제거되고 (unmount)
컴포넌트는 다음과 같은 인생주기를 겪게 된다.
이렇게 인생주기를 알면 중간 중간 간섭이 가능하다.
즉 mount 될때 어떠한 실행 코드를 달아놓으면 실행 되는 순간 코드가 작동한다.
마찬가지로 업데이트할때나 제가 될때에도 해당 코드들을 작동이 가능하다.
옛날 클래스형을 사용했을 때 위의 중간간섭을 좀 더 직관적으로 썼다.
각 함수들이 mount 될때 update 될때 unmount 될때 실행할 코드들을 저렇게 넣어줬다.
React 에서 useEffect 안애 콘솔코드는 두번 실행된다.(디버깅을 위해서)
실제 사이트에서는 한번 동작하는데 이게 싫다 하면 index.js 파일에 <React.StrictMode>를 제거하면 됨.
useEffect 처음에 화면이 랜더링 될때 실행되는 경우(mount)
처음에 화면을 새로고침하면 안녕안녕 콘솔에 찍히는것을 확인할 수 있다.
useEffect의 화면이 업데이트 될때 실행하는건 어떤 경우 일까?(update)
🔨 리 랜더링 할 때이다.
즉 useState 의 state 값이 바뀌어 화면이 렌더링 될때 한번씩 실행 된다고 보면 된다.
버튼을 눌렀을때 리랜더링 되는 환경을 만들고
버튼을 누른 횟수만큼 즉 랜더링 된 횟수만큼 실행되어 콘솔에 찍힌것을 알 수 있다.
그런데 ?
이렇게 useEffect 밖으로 꺼내서 실행해보면
console 찍히긴 찍히는데? 뭐가 다른거지?
그러면 useEffect 를 언제 쓸지 알아보자!!
💡 useEffect를 쓰는 이유!
실행 시점이 다르다.
useEffect 밖에 있던 console 과 같은 경우는 그냥 저 코드가 위치해 있는 공간쯔음 실행이 되는데
useEffect 안에 적은 코드는 렌더링이 다 되고나서 실행된다. (return 에 html 렌더링 후에 동작한다.)
그래서 뭐요? (므으쯔르그으)
하나 코드중간에 엄청 복잡한 코드가 있다고 가정해보자
console.log(1) 을 만번을 찍어야한다.
일반적으로 자바스크립트를 실행하면
반복문부터 실행을 하고 각종 선언된 변수 코드들 실행되고 그다음에 html이 실행된다.
이렇게 오래 걸리는 for 반복문을 먼저 실행시키면
상대적으로 뒤에 실행되는 html이 화면에 보여주는데 그만큼 영향을 받을 수밖에 없다.
이때!
useEffect에 오래걸리는 코드를 넣어놓고 실행시키면 html이 렌더링 후 실행되는 useEffect 특성상
가장 중요한 화면(html)을 먼저 보여주고(동작하고) 나중에 무거운 동작들을 실행 시킬 수 있는 것이다.
실제로 버튼을 눌러서 화면에 1이 증가하는 동작을 실행시키면
useEffect 밖에 console이 있는 경우보다 안에 있는게 훨씬 깔끔하게 동작한다.
💡useEffect를 주로 어디에 쓰냐면
1. 어려운 연산 무거운 연상등을 useEffect에 넣는다
2. 서버에서 데이터를 가져오는 작업. 상대적으로 화면에 좀더 빨리 표시해줘야 하는 html 뒤에 가져오는게 좋다.
3. 타이머 장착할 때
타이머 주는 방법!
setTimeout(()=>{실행할 코드}, 1000}; 1000ms(1초 후에)시간 후에 코드를 실행시키는 함수.
왜 use'Effect' 일까?
sideEffect 라고 함수의 핵심기능 상관없는 부가기능을 나타내는 단어가 있는데 비슷한 의미로
핵심이 아닌 부가적인 기능을 주로 사용하라고 useEffect 라고 지은것이다.
html 관련 핵심적인 랜더링 기능이 아닌 sideEffect 들의 보관함 이라고 보면 된다.
숙제!
그렇다면 화면이 보여진 후 2초동안만 보여지는 할인 안내 창을 만들어 보자!!
화면이 보여진 후라고? -> html 렌더링이 끝난 다음에 해야겠네?
아 useEffect 에 타이머를 넣으면 되겠다!
boolean 타입의 변수를 하나 생성하고
setTimeout() 을 통해 2초 후에 false 로 값이 바뀌는 함수를 만들고
삼항 연산자를 통해 true 가 false 로 바뀌면 화면에서 사라지게 null 을 넣으면 된다!
좀 더 좋은 코드는!
useEffect(()=>{
setTime~~~~
},[])
이렇게 해줘야 완벽한 코드이다.
이걸 안해주면 다른 게 마운트 될때 마다 계속 실행돼서 비효율적이다.
화면이 딱 켜지고 저 함수가 실행해서 2초후에 없어지는 기능만 온전히 하려면 저 코드가 맞다!
저게 뭔데?😮
다음 정리글에서 확인하세요!
출처 : 코딩애플 React 강의입니다.
스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.