해석하자면 컴포넌트의 생명줄기(인생)

컴포넌트는 생성이 될수도 있고, 삭제될수도있고(다른페이지로 넘어가는것 등등), state가 변경되면 업데이트가 될 수도있음 이거를 lifecycle 이라고 합니다

우리는 컴포넌트 lifecycle에 Hook이라는걸 걸수있다, 그럼 Hook이 무엇이냐?

우리는 예를들어 "컴포넌트가 생성되기전에 ~~~한 Hook을 걸어주세요~" 라고 요청할수있다 혹은
"컴포넌트가 삭제되기전에 ~한 Hook을 걸어주세요" 라고 요청할수도 있다

아주 이해하기 쉽게 알려주신다..!!

lifecycle에 Hook을 거는법은 class로 만들어진 components들에 사용할수있다
(예전에 쓰던 방법이지만 옛날 코드를 보게 될 상황이 생길수도 있으니 알아두자)
근데 이건 좀 복잡하자나! 그러니까 좀 더 쉬운 현대인의 문법을 써보자 !

useEffect

이렇게 컴포넌트 안에 useEffect 함수를 입력하면

자동으로 상단에 import 된다는건 꿀팁아닌 꿀팁!

컴포넌트 안에 이렇게 함수 만들듯이 만들어주면 손쉽게 바로 사용이 가능하다
이 훅은 아까 말했던 lifecycle 훅이랑 똑같은 기능을 한다

setTimeout 안에는 (function(){ }) 라고 콜백함수를 넣어주어야 하지만
콜백함수는 대부분 (()=>{}) 이렇게 arrow function으로 대체가 가능하다

setTimeout 같은 경우는 보통 변수에 많이 저장해서 사용한다, 왜냐면 나중에 타이머를 지우고싶을때가 있기 때문에 변수에 저장해서 사용하는 경우가 다수임

우리 전에 UI 만드는 스킬을 어느정도 배웠다 state로 만들어서 변경시키고..기억나나?

state에 true값을 주고 "현재 보이는 상태입니다" 라는걸 기본값으로 주자

우리 처~~음에 했던것 기억나나? alert라는 state의 값을 바꾸기 위해서는 옆에있는 alert변경을 바꿔서 넣어주어야한다
일단 조건문(삼항연산자)으로
alert가 true면 요거를 보여주시고

alert가 false면 비어있다고 알려주세요~ 라고 적었습니다

그럼 이제 다시 useEffect로 돌아와서 우리가 아까 만들어놓은 스위치(state) 기억나나? 그 변경함수 !!
그걸 이용해서 이제 함수를 만들면 된다 !!!!
"2초후에 alert변경 함수에 false값을 넣어주세요~" 라고 입력해 놓은것이다 그러면 뿅 작동함!
근데 useEffect 특징이
시작할때, 업데이트할때,삭제할때마다 실행된다고 하는데 그러면 우리가 의도하지않은 버그가 발생할수있다
(저렇게만 작성하면 Detail 컴포넌트가 업데이트 될 때마다 저 useEffect가 실행된다!)

그럼 일단 먼저 업데이트 될 때마다 실행이 되는지 확인해보아야 하니 새로운 항목을 넣어주자

일단 인풋 기능을 넣어줄건데, 인풋에 입력하면 입력 정보가 저장될 공간(state) 하나를 만들어주자

그러고 이렇게 값을 넣어주자. 항상 파라미터에 e를 넣고 저 (e.target.value) 기능을 써야
내가 사용하는곳에 대한 값을 받을수 있는걸 잊지말자

우리는 지금 입력할때마다 재렌더링(업데이트)이 되는 기능을 만든것인데, 이게 실행할때마다 위에 적어둔 useEffect가 같이 실행을 한다! 이것을 설명하기 위해 여기까지 온것이다 ㅠ ㅠ

우리 마음은 이렇게만 하고싶은데 그것도 몰라주고..

근데 이걸 막으려면 처음에 useEffect를 작성할때 잘 ! 써주면 된다고 한다

그것은 바로 저기 마지막에 보이는 대괄호만 넣어주면 되는것 ! 저건 실행조건을 넣기위한 대괄호다

이렇게 아까 우리가 만들어놓은 alert 라는 state가 실행이 될 때만 useEffect를 실행해 주세요~ 명령할수있다 근데 여기서 주의할점 !!!!!

이렇게 alert 라는 state가 useEffect보다 아래에 적혀있으면 컴퓨터는 오류가 난다
"님아 useEffect 저거 실행했는데 alert라는거 못찾았음 어딨음?" 하면서 말이다
그래서 우리는 state를 컴포넌트 상단에 적어주어야 한다

like this yeah?

마지막 대괄호 안에는 여러가지 state명을 넣을수있다 !

공허한 저 state가 변경이 될 때만 useEffect 실행해 주세요~ 하는거다

그렇게되면 저 useEffect 효과는 업데이트때는 영영 실행이 안된다, 맞는 조건이 없기 때문에(업데이트 막는거임)
그냥 페이지 들어가면 딱 한번 실행하고 끝나게 된다

추가적인 팁인데, 우리가 시간초 정해둔게 끝나기도 전에 페이지 뒤로가기 이런걸 하게되면 오류가 뜰수도있다

컴포넌트가 사라질때도 코드를 실행시킬수 있는데, 그대는 uesEffect 아래에 return을 적고 콜백함수나 arrow function을 사용해서 적으면 된다

return 을 쓰게되면 Detail 컴포넌트가 사라질때 특정 코드를 실행할수 있다, 여기서 타이머를 제거하면 된다
여기엔 콜백함수를 넣어도 되지만 arrow function을 사용해도 된다

마지막으로 useEffect는 반복으로 많이 사용해도 된다 ! 하지만 위에서부터 적어놓은 순서대로 실행되기 때문에 유의하자

대~부분의 UI는 항상 켜져있는게 아니기 때문에 스위치 역할을 할수있도록 이렇게 boolean 값을 자주 쓴다고 한다

자 길고 긴 useEffect 강의 1차가 끝났다 ㅠ 강사님이 그래도 쉽게 알려주신거같다 ..감사합니다..!