useEffect

화면에 첫 렌더링하는 Mount, 다시 렌더링하는 Update, 화면에서 사라질 때특정 작업을 처리할 코드를 실행시키고 싶을 때 useEffect를 사용한다.

useEffect의 형태

useEffect(() => {})
기본적으로 useEffect hook은 callback함수를 받으며, 여기서 callback함수는 다른 함수의 인자로 전달된 함수를 의미한다. callback함수 내부에 사용자가 원하는 작업을 처리해줄 코드를 작성해주면 된다.

useEffect(() -> {작업}) 

- useEffect의 인자로 하나의 callback 함수만 받는다.

useEffect(() -> {작업}, {value}) 

- useEffect의 첫번째 인자로 callback함수를 두번째 인자로 배열을 받는다.

useEffect(() => {작업});
  
- 렌더링 될때 마다 매번 callback 실행
- 컴포넌트가 맨처음 화면에 렌더링이 될때, 컴포넌트가 다시 렌더링 될때 실행

useEffect(() => {작업}, [value]);

- 화면에 첫 렌더링이 될때 실행
- 배열안에 value값이 바뀔때만 실행
- 빈배열 전달시, 화면에 첫 렌더링 될때 실행

cleanup

useEffect(() => {작업}, []);

• 만약 useEffect에서 어떤 작업을 하는 코드를 넣었을 때 이후 작업해제를 하는 clean up 정리 작업을 처리해줘야한다.

• 만약 타이머를 시작한다면 타이머를 사용하지 않을 때 멈추는 정리함수를 작성해줘야함
  만약 이벤트 리스너를 등록했다면 등록한 리스너를 제거해주는 정리 작어블 해야한다.

• unmount 될 때
  useEffect(작업,[])

• 특정값 updata 직전
  useEffect(작업,[특정값])

  re-render -> 이전 effect clean-uo -> effect