React Project10. Lifecycle Hook (옛날사람) useEffect (요즘사람)

react-dom.development.js:67 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
a태그 안에 a태그 넣으면 안된다는 에러.

<Nav.Link> Home </Nav.Link>
를 아래처럼 바꾸면 해결
<Nav.Link as={Link} to="/"> Home </Nav.Link>

as라는 것은 react-bootstrap 문법.
그냥 기본 a태그 대신 사용할 HTML태그 혹은 컴포넌트를 집어넣을 수 있음.

그래서 Link 태그를 집어넣은 것일 뿐. 끝.

useEffect() 함수로 Lifecycle을 구현할수 있다?!

컴포넌트에도 인생 주기
1. 탄생
2. 죽음
3. 관련된 state가 변경되면 재렌더링(업데이트)

Q. life cycle 왜알아야 하나?

컴포넌트의 인생 중간중간 Hook(갈고리)걸 수 있다.
훅을 이용해 인생 중간중간 참견하기 위해 배운다.
아래의 것들을 코드로 짤 수 있다.

"Detail 컴포넌트 등장 전에 이것좀 해줘"
“Detail 컴포넌트 사라지기 전에 이것좀 해줘”
“Detail 컴포넌트 업데이트 되고나서 이것좀 해줘”

클래스에서의 life cycle을 먼저 보자.

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

function 컴포넌트에서의 useEffect 훅

요즘 리액트 개발에선 useEffect를 많이 사용함(짧고 간편)
function 컴포넌트 안에 넣어주기만 하면 끝. (return문 나오기전에)

import React, {useState, useEffect} from 'react';// 밑에 useEffect작성하면 자동완성됨.

function Detail(){
  
  // Detail 컴포넌트가 화면에 보일때(랜더링될 때), 또는 업데이트 될때 useEffect 실행됨
  useEffect(()=>{
    //코드를 적습니다 여기
    
    return function 어쩌구() { 실행코드 }
    // return문을 써주면 Detail 컴포넌트가 사라질때(Unmount될때) 실행할 코드 실행
  });
  
  // 컴포넌트 안에 useEffect 여러번 수행가능.
  // 수행순서 : 하향식
  
  return (
    <HTML많은곳/>
  )
}

1. useEffect를 import
2. useEffect() 를 사용
3. 콜백함수 삽입. () => {}
4. 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 된다.

조금 더 자세하게 알아보느 useEffect() 내의 코드의 실행조건
– 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (전문용어로 mount 끝났을 때)
– 컴포넌트가 재렌더링 되고난 후 때 (전문용어로 update 되고난 후에)
Detail 컴포넌트 로드시나 업데이트시 뭔가 코드실행하고 싶은게 있으면 여기다 다 적으면 끝

*참고)
return문에 적은것들은 Detail 컴포넌트가 사라질때 실행됨.(unmount 될때)
만약 여러개를 실행하고 싶다면?

1. 함수를 여러개 만들던가,
2. useEffect를 여러개 적든가