React실전8 Lifecycle과 useEffect1,2

Lifecycle hook에 대해서 배워봅시다

• 컴포넌트의 Lifecycle
  • 컴포넌트가 보이는 순간을 : 컴포넌트가 마운트(mount)된다. 컴포넌트가 장착된다. 라고 말한다.
  • 컴포넌트 안에서 state를 조작하면 : 컴포넌트가 update 되기도 한다.
  • 그리고 다시 home 으로 돌아가면 : 컴포넌트가 제거되기도 한다.(unmount)

이런식으로 컴포넌트는 lifecycle (인생주기)가 있다.

장착, 업데이트, 삭제.

이걸 왜 배우냐면, ? 이걸 알고 있으면 중간중간 간섭 가능.

• 간섭 = 코드 실행

컴포넌트가 장착될 때 특정 코드를 실행할 수 있고,

컴포넌트가 업데이트 될 때 특정 코드 실행할 수 있고,

컴포넌트가 제거될 때 특정 코드 실행할 수 있다.

그래서 lifecycle을 배우는거야.

• 재밌는 기능들을 구현할 수 있겠지.
  • 갈고리를 달아서 간섭하는거야.

class Detail2 extends React.Component {
 componentDidMount(){ 컴포넌트 mount시 여기 코드 실행됨 }
 componentDidUpdate(){ 컴포넌트 update시 여기 코드 실행됨 }
 componentWillUnmount(){ 컴포넌트 unmount시 여기 코드 실행됨 }
 }

이런 함수들을 이용할 수 있었는데, 요즘은 이런 함수를 짠다. useEffect() 라는 hook을 사용한다. 물론 얘도 import 해서 사용해야 한다.

import { useEffect } from ‘react’;

컴포넌트 안에 return전에

function Detail(props){
	useEffect( ()=>{ 여기 안에 적은 코드는 Detail(해당) 컴포넌트가 mount, update시 여기 코드 실행됨  } ) 
}

진짜인지 확인해 보고 싶으면 console 창에다 출력하면 되겠다. console.log(‘안녕’)

근데 console에 두번 찍힘. 원래 리액트가 그럼. 디버깅을 위해서랄까? 그게 싫다면 index.html에 가서 <React.StrictMode> 라는 html 태그 없애거나 하기

그렇다면 이제 재렌더링을 해보자.

재렌더링을 위해서 state와 state변경함수를 만들어보자.

let [count, setCount] = useState(0);
{count}
<button onClick={()=>{setCount(count+1)}}>버튼</button>

useEffect 쓰는 이유

useEffect 안에 있는 코드는 html 렌더링 후에 동작한다.

for (var i = 0; i<10000; i++){
	console.log(1);
}

=> 속도에 차이가 있다.

useEffect 안에 적는 코드들은

• 어려운 연산
• 서버에서 데이터 가져오는 작업
• 타이머 장착하는 거

왜 이름이 Effect 인가?

• 프로그래밍 용어중 side Effect: 함수의 핵심 기능과 상관없는 부가기능
• 여기서 따온 함수명이라고 보면 되겠다.
• useEffect 안에 들어갈 코드들은 Side Effect 코드들 보관함이다.

오늘의 숙제

Detail 페이지 방문 후 2초 지나면 <div> 숨기기

타이머 주는 법

자바스크립트에서는 ‘setTimeout()’이라는 함수가 있다. ex. 1초후에 어떤 코드를 실행하고 싶어요 setTimeout(()=>{ 실행할코드 }, 1000) 이렇게 적으면 됨.

---

2

useEffect(()=>{
 setTimeout(()=>{ setAlert(false) }, 2000)
}, [ ])
// 이 대괄호 있으면 더 정확함
// 이것의 용법을 아는것이 이번시간의 내용

• useEffect를 쓸 때 [ ]를 추가해서 사용할 수도 있다.
• 이것의 이름은 dependency.
• 여기에 아무런 변수나 state를 집어넣을 수 있다.

  useEffect 실행조건 넣을 수 있는 곳 : [ ]

• dependency가 추가되면 dependency 안에 있는 변수 혹은 state가 변할 때마다 코드가 실행됨.
• 혹은 dependency 안에 그냥 빈칸으로 두는거야.
• 그러면 컴포넌트 mount시 1회만 실행하고 끝난다.

useEffect 또 다른 문법

return()을 추가할 수 있다.

useEffect(()=>{
 setTimeout(()=>{ setAlert(false) }, 2000)
 return ()=>{ 여기에 적힌 코드는 useEffect가 실행이 되기 전에 실행된다. }
}, [ ])

• 요 함수의 별명: clean up function
  • 싹 치운다는 의미

예를들어,

return()=>{ 기존 타이머는 제거해주세요~ }

이런식으로. 기존 코드 치우는 거 여기에 많이 작성함 !

• 그래서 타이머 제거 어떻게 함?
  • 타이머제거해주는 함수: clearTimeout(a)

useEffect(()=>{
 let a =setTimeout(()=>{ setAlert(false) }, 2000)
 return ()=>{ clearTimeout(a) }
}, [ ])

서버로 데이터 요청하는 코드

return()=>{ 기존 데이터요청은 제거해주세요~ }

• (참고) clean up function은 mount시 실행안됨. unmount시 실행됨.

• 오늘의 숙제: <input>에 숫자 말고 다른 거 입력하면, 그러지 말라고 안내메시지 띄우기.