Effect Hook

useEffect

useEffect(setup, dependencies?)

• setup
• Effect 로직이 포함된 함수입니다. 셋업 함수는 선택적으로 클린업 함수를 반환할 수도 있습니다.
• 의존성이 변경되어 다시 렌더링할 때마다 React는 먼저 이전 값으로 클린업 함수를 실행한 다음, 새 값으로 셋업 함수를 실행합니다.

• optional dependencies : setup 코드 내에서 참조된 모든 반응형 값의 목록입니다. 반응형 값은 props, state, 컴포넌트 본문 내부에서 직접 선언한 모든 변수와 함수를 포함합니다.

useEffect에는 두 개의 인자를 전달해야 합니다.

1. 해당 시스템에 연결하는 셋업 코드가 포함된 셋업 함수

2. 해당 함수 내부에서 사용되는 컴포넌트의 모든 값을 포함한 의존성 목록

React는 필요할 때마다 셋업 및 클린업 함수를 호출하는데, 이는 여러 번 발생할 수 있습니다.

1. 컴포넌트가 페이지에 추가될 때(마운트)마다 셋업 코드를 실행합니다.

2. 의존성이 변경된 컴포넌트를 다시 렌더링할 때마다.

3. 컴포넌트가 페이지에 제거되면 (마운트 해제) 마지막으로 한 번 클린업 코드를 실행합니다.

Effect에서 데이터 페칭하는 것을 대체할 좋은 대안은 무엇인가요?

Effect 내부에 fetch를 작성하는것은 데이터를 페치하는 인기있는 방법으로, 완전한 client-side 앱에서 특히 그렇습니다. 하지만 이는 매우 수동적인 접근 방식이며 상당한 단점이 있습니다.

• Effect는 서버에서 실행되지 않는다.

• Effect에서 직접 페칭하면 “네트워크 워터풀”을 만들기 쉽다.

• Effect에서 직접 페칭한다는것은 일반적으로 데이터를 미리 로드하거나 캐시하지 않는다는 것을 의미한다.

useLayoutEffect

useLayoutEffect(setup, dependencies?)

• setup
• Effect의 로직이 포함된 함수입니다.
• 변경된 의존성으로 다시 렌더링할 때마다 React는 (클린업 함수를 정의한 경우) 먼저 이전 값으로 클린업 함수를 실행한 다음, 새 값으로 셋업 함수를 실행합니다.

• optional dependencies
• setup 코드 내에서 참조된 모든 반응형 값의 목록입니다.
• 반응형 값에는 props, state, 컴포넌트 본문 내부에서 직접 선언된 모든 변수와 함수가 포함됩니다.

useInsertionEffect