React_03.

🌈   React useEffect

🧐 useEffect 란???

✓ 어떤 상태 값이 변경 되었을때 동작하는 함수를 작성할 수 있다.

• react 컴포넌트가 렌더링 될 때마다 특정 작업을 실행 할 수 있도록 하는 Hook이다.
• class형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 되었다.

📌 useEffect 사용법

• 기본 형태
  • useEffect(함수,배열)

1. useEffect의 첫번째 매개변수로 함수를 넣는다.

• 함수가 호출된 타이밍은 렌더링 결과가 실제 DOM에 반영된 직후,
• 컴포넌트가 사라지기 직전에 호출된다.

2. useEffect의 두변째 매개변수로 [ ]배열을 넣는다.

• 컴포넌트가 화면에 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 빈 배열을 넣는다,
  • 이것을 의존성 배열이라고 부른다.
• 만약 배열을 생략하면 리렌더링 될 때 마다 실행된다.

3. 컴포넌트가 업데이트 될 때 특정 props, state값이 변경 될 때 [ ]안에 검사하고 싶은 값을 넣어준다.

• 업데이트 될 때만 실행하는 것이 아닌, 마운트 될 때도 실행된다.
• 배열안에 특정 값을 넣게 되면 컴포넌트가 처음 마운트 될 때 지정한 값이 바뀔 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출이 된다.
• useEffect 안에서 사용하는 상태나 props가 있을 경우, useEffect의 배열에 넣어주는 규칙이다.
  • 만약 사용하는 값을 넣어주지 않는다면 useEffect안의 함수가 실행될 때 최신 상태의 props를 가리키지 않는다.