class형 / 함수형 컴포넌트의 라이프사이클

component는 크게 두 가지 방식이 있다.

class형과 함수형으로 현재 리액트의 공식문서에는 함수형을 쓰도록 명시한다.
하지만 class형의 라이프사이클 함수가 component의 라이프사이클을 명확히 보여주기 때문에, 알아둘 필요가 있다.

component의 라이프사이클은 크게 생성-수정-제거의 단계로 나뉜다.

1. 생성: 처음 component를 불러오는 단계
2. 수정: props가 바뀔 때 state가 바뀔 때, 부모 component가 렌더링할 때, 강제 업데이트가 이루어질 때
3. 삭제: 해당 component가 화면에서 사라질 때 (사용자의 행동, 페이지 이동 등)

---

class형 컴포넌트의 라이프사이클 메서드

class형의 라이프사이클메서드는 생성-수정-삭제 단계를 거치며 호출되는 메서드이다.

• constructor() : 생성자 함수, 해당 component의 props와 state를 선언한다.
• render() : component의 모양을 정의한다. (마치 HTML같은) 리액트 요소를 return에 넣어 반환한다.
• componentDidMount() : 마운트(component가 화면에 나타남)가 완료된 후 실행된다.
• componentDidUpdate(prevProps, prevState, snapshot) : 리렌더링이 완료된 후 실행된다.
  prevProps, prevState는 업데이트 전의 Props, State를 말한다.
• componentWillUnmount() : 컴포넌트가 제거되기 전 마지막에 실행된다.

라이프사이클메서드는 component의 라이프사이클에 따라 1 - 2 - 3 - 2(리렌더링) - 4 - 5의 과정으로 실행된다.

---

useEffect

반면 함수형 컴포넌트에서는 클래스형 컴포넌트의 라이프사이클함수에 해당하는 useEffect를 사용한다.
useEffect는 컴포넌트가 한 번 렌더링 된 후 적어도 한 번은 실행된다.
클래스형 컴포넌트의 componentDidMount 역할을 한다고 할 수 있다.

1. dependency를 생략하고 사용할 수 있지만,
   해당 컴포넌트가 렌더링 될 때 마다 useEffect가 실행되는 일이 발생한다.

useEffect(()=> { });

2.dependency ([괄호]) 에 아무것도 넣지 않은 유즈이펙트는 첫 렌더링 시 한 번만 실행된다.

useEffect(()=> {}, [dependency]);

3. dependency에 변수를 넣어 해당 변수가 변할 때,

예를 들어 이런식으로 useState와 useEffect를 사용한다면 name변수가 변할 때

useEffect 함수가 계속 실행된다. 클래스형 컴포넌트의 componentDidUpdate라고 생각할 수 있다.

만약 다른 요인으로 리렌더링이 되더라도 해당 변수의 값이 변하지 않는다면 useEffect는 실행되지 않는다.

const [name, setName] = useState('');

useEffect(()=>{ console.log(name);
},[name]);

4. return은 componentWillUnmount에 해당한다. 렌더링된 후 유즈이펙트가 실행되고,컴포넌트가 없어지기 전 return이 실행된다.

const [name, setName] = useEffect;
useEffect(()=> { console.log(name);
  return ()=> {console.log('stop');
}; 
});

2. 마찬가지로 dependancy 를 비워둔다면 유즈이펙트와 return 모두 한 번씩만 실행된다.

const [name, setName] = useEffect;
useEffect(()=> { console.log(name);
	return ()=> {
	console.log('stop');
},[]});

3. dependency에 넣은 변수가 변화할 때만 return이 실행된다.

const [name, setName] = useEffect;
useEffect(()=> { console.log(name);
return ()=> {
console.log('stop');
},[name] } );