쇼핑몰 프로젝트(Lifecycle / useEffect)

코딩애플 님의 강의를 바탕으로한 글입니다:)

Lifecycle

컴포넌트는 생성이 될 수 있고, 삭제가 될 수 있고, 관련된 state가 변경되면 재렌더링이 일어난다. 이와 같이 컴포넌트의 인생을 말한다.

이때 Hook으로 중간에 참견을 할 수가 있다.
예를 들어, Detail 컴포넌트가 등장 전에, 삭제전에, 변경 후에 이 명령 좀 해달라고 개입하는 것이다.

Lifecycle Hook

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 Mount 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
  }
}

UserEffect()

useEffect() 내의 코드의 실행조건

• 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (전문용어로 mount 끝났을 때)
• 컴포넌트가 재렌더링 되고난 후 때 (전문용어로 update 되고난 후에)

1. 페이지 상단에 useEffect를 import.
2. useEffect() 를 사용.
3. 그리고 안에 콜백함수를 집어넣기.
4. 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드를 적을 수 있다.

import React, {useState, useEffect} from 'react';
function Detail(){
  useEffect(()=>{
    //코드를 적습니다 여기
  });
  return (
    <HTML많은곳/>
  )
}

• 컴포넌트가 사라질 때 코드를 실행 (전문용어로 unmount)
  return을 넣어 주고, return 값에 넣은 함수가 바로 컴포넌트가 사라질때 실행이 된다. 물론 다른 곳에서 만든 함수명을 가져다 써도 되고, arrow function도 가능하다.

import React, {useState, useEffect} from 'react';
function Detail(){
  useEffect(()=>{
    return function 어쩌구(){ 실행할 코드 } 
  });
  return (
    <HTML많은곳/>
  )
}

여러개도 사용 가능
작성한 순서대로 기능이 구현된다.

import React, {useState, useEffect} from 'react';
function Detail(){
  useEffect(()=>{
    //1빠로 실행할 코드
  });
  useEffect(()=>{
    //2빠로 실행할 코드 
  });
  return (
    <HTML많은곳/>
  )
}

응용

만약 detail 페이지에 만든 공지창이 컴포넌트가 실행되면 2초 후에 사라지게 하고 싶다면?

항상 기억하자! UI요소에 대한 것은 state로 저장해놓자.
나의 대략적인 생각, 공지창이 true일때까지 보이다가 false가 되면 사라지기.

1. useState에 notice라는 변수를 true값으로 저장.

2.조건문을 사용하여 스위치도구를 만든다.
notice가 true라면 ? 다음에 오는 코드를 실행하고, 그렇지 않으면 : 다음에 오는 null 값이 실행된다. 즉, 사라진다는 뜻.

3. useEffect 안에 콜백함수로 있는 setTimeout은 타이머와 같은 함수로 또한 콜백함수를 받는다. 따라서, notice변경함수를 통해 notice를 false값으로 변경하는 것이다. 단, 조건에 작성된 2초 후에 말이다.
   

잠깐)
앞서 말했듯이 useEffect는 컴포넌트 등장에 실행이 되지만, 업데이트시에도 실행이 된다.
따라서, 화면이 나타나고 2초 후에 공지가 사라지지만, 화면이 업데이트되는 경우에도 공지가 사라지는 기능이 또 실행된다.

따라서 함수 끝에 대괄호 표기가 가능한데, 이 안에 state명을 작성한다. 그러면 notice라는 state가 변경될때만 실행이 된다는 뜻이다.

만약 []로 빈칸이라면?
컴포넌트가 업데이트 될때 절대 실행이 되지 않는다. 컴포넌트가 로드될때 한번만 실행시키고 싶을때 사용하는 일종의 트릭이다.

Tip) setTimeout 쓸때 주의점
만약 Detail 방문 시 2초후에 공지가 사라지게 하는 기능을 짰다.(앞서 한 내용)
근데, 2초 전에 그 페이지를 벗어나버리면?
남아있는 타이머 때문에 이상한 현상이 일어날 수도 있다.

따라서 컴포넌트가 사라질때 타이머를 없애는 코드도 추가해주면 된다.
앞서 배웠듯이 useEffect 함수 속 return 값은 컴포넌트가 사라질때 살행되는 코드라고 했음으로 return값으로 타이머를 없애는 코드를 추가해면 된다.