[React] useEffect 사용해보기

💡 실습 포인트!

💜 warnig 해결하기

🤍 <a> cannot appear as a descendant of <a>

• 지난 번 Router 수업이 지난 후부터 위와 같이 "a 태그 안에 a 태그를 넣으면 안됩니다." 라는 내용의 warning 이 뜨기 시작했다.

<Nav.Link><Link to="/">Home</Link></Nav.Link>

• 알고보니 Bootstrap 을 복사-붙여넣기 했던 부분인 <Nav.Link></Nav.Link> 태그 안에 <Link></Link> 태그를 넣은 게 문제였다.
• 이 두 개의 태그는 모두 <a> 태그와 마찬가지로 링크 기능이 있는 태그여서 위와 같은 warning 이 떴던 것이다.

<Nav.Link as={Link} to='/'>Home</Nav.Link>

• 그래서 위와 같이 코드를 수정해주었다.
• as 라는 속성은 React Bootstrap 문법인데 그냥 기본 <a> 태그 대신 사용할 html 태그 혹은 Component 를 집어넣을 수 있다.
• 따라서 <Link> 태그를 넣어주었다.
• 이제 개발자 도구로 확인했을 때, 기존에 뜨던 warning 이 더이상 뜨지 않는 것을 확인할 수 있다.

---

💜 Component 의 Lifecycle 과 Hook 살펴보기

🤍 Lifecycle 살펴보기

• Component 에는 Lifecycle 이라는 개념이 있다.
• 그렇기 때문에 Component 는 생성이 될 수도, 삭제가 될 수도, 관련된 state 의 변경에 따라 재렌더링이 될 수도 있다. 

---

🤍 Hook 살펴보기

• 특정 Component 의 Lifecycle 중간중간에 어떤 기능을 넣고 싶을 때가 있는데, 이런 역할을 하는 것을 갈고리처럼 그 시점에 브레이크를 건다고 하여 갈고리라는 의미의 Hook 이라고 한다.
• 그래서 Component 생성 전에 어떤 기능을 실행해달라든지, Component 가 삭제되기 전에 어떤 기능을 실행해달라든지 등등의 코드를 Hook 이라는 것을 통해 할 수 있다.
• Hook 의 정확한 명칭은 Lifecycle Hook 이다.

---

💜 Lifecycle Hook 알아보기

• Hook 들은 원래 class 로 만든 Component 에서 사용이 가능하다.

class Detail2 extends React.Component {
  componentDidMount(){
    // Detail2 Component 가 Mount(생성) 되고 나서 실행할 코드
  }
  componentWillUnmount(){
    // Detail2 Component 가 Unmount(삭제) 되기 전에 실행할 코드
  }
}

• 가장 유용한 Hook 을 2개 꼽으라면 위에 작성한 2개의 코드이다.
• componentDidMount() 에는 Component 가 처음으로 생성된 후 실행할 코드를 작성하면 된다.
• componentWillUnmount() 에는 Component 가 사라지기 전에 실행할 코드를 작성하면 된다.

---

💜 useEffect Hook 알아보기

• 요즘 React 개발에서는 더 짧고 쉽다는 장점때문에 useEffect 를 많이 사용한다.

import React, {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    // 여기에 코드 작성
  });
  
  return (
  // HTML 태그들 작성하는 위치
  )
}

• 사용하는 방법은 위와 같이 function Component 안에서 return 이 나오기 전에 useEffect() 를 넣어주면 되는데 정리하자면 다음과 같다.
  • 페이지 상단에 미리 useEffect 를 import 한다.
  • useEffect() 를 사용한다.
  • useEffect() 안에 콜백함수를 넣는다.
  • 콜백함수 안에 Detail Component 가 생성된 후에 실행하고 싶은 코드를 작성한다.
• useEffect() 내의 코드 실행 조건을 자세하게 보자면 다음과 같다.
  • Component 의 mount 가 끝났을 때 (Component 가 생성된 후 로딩까지 끝났을 때)
  • Component 가 update 되고 난 후에 (Component 가 재렌더링 되고 난 후에)