React에서 Hook이란? (공부 + 면접 답변용)

1. Hook에 대한 이해

Hook이란 : React 상태 관리, 생명주기 관리, 컨텍스트 접근 등의 작업을 돕는 특별한 함수이다

▶ Function과 Feature 구분하기
Function (함수) : 특정 작업을 수행하는 코드 블록.
Feature (기능) : 함수보다 더 넓은 개념으로, 특정 목표를 달성하기 위해 제공되는 도구나 서비스이다.
Hook은 “함수형 컴포넌트에서 상태와 생명주기 관리를 가능하게 해주는 기능” 으로 볼 수 있다

▶ Hook의 역할과 기능을 이해하는 방법
React에서 Hook은 단순한 함수 이상의 의미를 가지고 있으며, 개발자에게 특정 기능을 제공한다

▶ React가 제공하는 도구로서의 기능
React Hook은 함수형 컴포넌트에서도 클래스 컴포넌트처럼 상태 관리나 생명주기 기능을 사용할 수 있게 해주는 도구로 간주된다

결론적으로 Hook은 “React 기능을 제공하는 함수”라고 이해하면 된다

2. 대표적인 Hook의 종류 

① useEffect 

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
useEffect는 컴포넌트가 마운트되었을 대, 혹은 언마운트되거나 업데이트될 때 특정 작업을 처리할 수 있다 
즉 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다  

→ useEffect 훅을 사용할 때는 첫번째 인수로 실행할 콜백 함수를 넣고 두번째 인수로 검사하고자 하는 특정 값이나 빈 배열을 넣는다 

 

② useState

함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook
ex) 사용자 입력 저장하고, 버튼 클릭 시 상태를 업데이트할 때 사용한다 

 

③ useContext

Context API와 함께 사용되며 여러 컴포넌트에서 동일한 상태나 데이터를 공유할 수 있다 

 

④ useMemo

useMemo와 useCallback은 성능최적화에 사용되며 값이 변하지 않으면 함수를 재실행하지 않도록 메모제이션을 도와준다 
의존성이 변경되었을 때만 메모이제이션된 값을 다시 계산하므로 불필요한 계산을 방지한다 

 

⑤ useCallback

useCallback 함수는 첫번째 인수로 입력된 콜백의 메모이제이션 버전을 반환한다 
반환된 메모이제이션 버전은 콜백의 의존성이 변경되었을 때만 변경되며 
이는 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용하다 
예를 들어 React의 Memo로 감싸진 컴포넌트에 프롭으로 전달하는 경우가 있다 

 

※ 메모이제이션

 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다 

리액트에서는 불필요한 계산 혹은 리렌더링의 방지를 위해 사용된다 

 

※ 함수형 컴포넌트

장점 

● 클래스형 컴포넌트보다 선언이 간편하다 

● 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다 

● 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작아진다 

 

※ 리액트의 라이프 사이클

React의 클래스형 컴포넌트에서 사용하는 LifeCycle API는 컴포넌트가 DOM 위에 생성되거나 사라질 때, 혹은 업데이트 될 때 호출되는 API이다 

<리액트 컴포넌트 생명주기 실습>

https://tiny-immj.tistory.com/115

[React] React 컴포넌트 생명주기, 생명주기 메소드