[React] React Hooks - (2) useEffect

2. useEffect

: 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅

• 컴포넌트가 화면에 보여졌을 때
• 컴포넌트가 화면에서 사라졌을 때

< useEffect가 실행되는 원리 >

1. input에 값을 입력
2. value, 즉 state가 변경
3. state가 바뀌었기 때문에, App 컴포넌트가 리렌더링
4. 리렌더링 되었기 떄문에, useEffect()가 계속 실행
5. 1~4 반복

**Dependency Array (의존성 배열)**라는게 필요하다
이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다.

의존성 배열에 아무 값도 넣어주지 않아도 동작하고 있다.
= 어떤 값을 입력하던지 간에, 의존성 배열이 비어 있기 때문에, 화면이 가장 처음 시작할 때만 렌더링 된다.

useEffect(() => {
    console.log(`hello useEffect! : ${value}`);
}, [value]);

clean up

// clean up
return () => {
  //컴포넌트가 죽을때 나타나는 로직
};