DAY : 14
ReactDay : 4

useEffect

1. What is useEffect?

: 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 해주는 Hook

• 사용법 : useEffect(function, [, deps]);

1. function (effect)
   : 렌더링 이후 실행할 함수 ( 리액트는 이 함수를 기억했다가 DOM업데이트 후 불러낸다.)

2. deps (dependencies; 의존성 배열)
   : 배열의 형태
   : 변경을 추적하고 싶은 특정 값
   : 지정한 특정 값이 변경될 때마다 effect함수가 실행됨
   : 빈배열 or 생략 가능

❗ useEffect는 Side Effect를 처리하고 컴포넌트의 생명주기별 기능을 구분하는데 사용된다.
(이게 다 함수형 컴포넌트를 써서 생긴 일이다. class형 컴포넌트에서 사용하던 기능을 땡겨와서 써보려고 Hooks를 만들었고, 그 안에 useEffect가 있다. 그래서 "useEffect로는 class 컴포넌트에 있는 어떤 기능을 써볼건데?" 라고 묻는다면, 위와 같이 "side Effect와 생명주기별 기능 구현을 할 때 쓸 거다!" 라고 대답하면 된다.)
( Hooks이전 함수형(function) component에는 렌더링 기능만 들어있었음 )

2. Side Effect

: component가 렌더링 된 이후에 비동기적으로 처리되어야 하는 부수적인 효과들

좀 더 쉽게 말하면

• 컴포넌트가 처음 렌더링 된 이후에 값이 업데이트 될 경우 이를 반영하는 처리

  ex) 서버로부터 어떤 데이터를 가지고 오는 경우
  : 화면을 구성하는 부분 먼저 렌더링 한 후, 그 다음 실제 데이터를 비동기로 가지고 온다.
  : API 응답이 늦어지거나 없는 경우에 사용자에게는 화면이 렌더링 되어있기 때문에 좋은 사용자 경험을 제공 할 수 있다.

3. Component LifeCycle Method (생명주기 메서드)

: 클래스형 컴포넌트에서 Component LifeCycle Method에 따라 기능을 구현한다.
: 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고(mount), 업데이트되고, 사라지게(unmount) 될 때 호출되는 메서드들이다.

---

1. Mount : 컴포넌트 생성부터, 최초 렌더링까지의 과정
2. Update : props, state변경 등
3. Unmount : 화면의 렌더링된 컴포넌트를, 삭제하기 까지의 과정
   ( cleanup함수 반환 ; return 뒤에 나오는 함수 )
   
   자세한 코드는 아래 링크에 잘 정리 되어 있음 : https://cocoon1787.tistory.com/796

cleanup함수

useEffect(()=>{
	console.log('effect');
    return ()=>{
    	console.log('cleanup')
    };
},[]);

➕ props 이미지 삽입하는 법
1. public폴더에 이미지 넣기
2. <img src={${process.env.PUBLIC_URL}/${image}} alt="project" />

도움 받은 사이트
: https://goddaehee.tistory.com/308
: https://xiubindev.tistory.com/100
: https://cocoon1787.tistory.com/796