Overview

훅은 리액트 16.8에서 추가된 비교적 새로운 기능으로, 한 마디로 함수 컴포넌트에 다양한 기능을 부여하기 위한 메커니즘, 해당 절에서는 이러한 훅 중 중요한 것들에 대해 설명

부작용 훅 - 컴포넌트 렌더링/파기 시 처리 수행

useEffect 함수는 부작용 훅이라고도 불리며, 컴포넌트의 상태(Props 또는 State)가 변경되었을 때 실행해야 할 처리를 정의할 수 있지만 **useEffect**를 사용해야 하는 상황은 상당히 제한적

useEffect

리액트는 화면 그리기(렌더링)를 중심으로 동작하기에 외의 일은 리액트가 직접 관여하지 못 함 외의 일 즉, 외부 세계와 상호작용을 할 때 **useEffect**를 사용

외부 세계와 상호작용

• 브라우저 API 사용
• 네트워크에서 데이터 가져오기 (API 호출)
• 외부 라이브러리와 동기화

<aside> 📌

API란 뭘까?

API란 Application Programming Interface의 줄임말로, 어떤 프로그램이 다른 프로그램의 기능을 사용할 수 있게 해주는 인터페이스를 말함 쉽게 말해 소프트웨어들 ( 웹사이트, ios 앱, 안드로이드 앱 ) 이 서로 대화할 때 사용하는 수단

비유를 통해 더 쉽게 알아보자..!!!

API는 서버 역할을 하는 프로그램이 나눠준 메뉴판

이 메뉴판에는 클라이언트 ( 요청을 보내는 쪽 ) 들이 보낼 수 있는 요청들이 메뉴처럼 나열되어 있음

ex) 다음 영상 재생하기, 댓글에 좋아요 누르기, 채널에 구독 누르기

클라이언트에서 어떻게 요청하는가 뿐 아니라 서버에서 어떻게 대답하는가 역시 정의

</aside>

useEffect 함수

useEffect(() => { statement }, deps)

• statement: (리) 렌더링 시 수행해야 할 처리 → 이펙트 함수라고도 불리며 처음 컴포넌트가 렌더링된 이후와 업데이트로 인한 재렌더링된 이후에 실행 의존성 배열(deps)을 생략시 컴포넌트가 업데이트될 때마다 호출