오늘 면접을 보고왔는데, 기술면접을 보던 중 React Hooks에 대한 질문을 받았는데, 대답을 제대로 하지 못한 부분이 있어서 이를 회고할 겸 모든 React Hooks에 대해 총 정리를 해보려고 한다.
React Hook 이란?
Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
React Hook이 필요한 이유?
Hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기 때문에, 클래스형 컴포넌트에서만 사용할 수 있던 상태관리를 더 손쉽게 할 수 있어 필요하다.
함수형 컴포넌트들은 기본적으로 리렌더링 될 때, 함수 안에 작성된 모든 코드가 다시 실행된다.
클래스형 컴포넌트들은 메서드의 개념으로, 리렌더링이 되더라도 render()를 제외한 나머지 메서드 및 state는 그대로 보존이 되어 있다.
이는 함수형 컴포넌트들이 기존에 가지고 있던 상태를 전혀 관리할 수 없게 만든다.
하지만 Hook의 등장으로, 브라우저에 메모리를 할당함으로써, 함수형 컴포넌트가 상태를 가질 수 있게 된 것이다.
공식홈페이지에 따른 Hook을 만든 이유
1. 컴포넌트 사이에서 상태 로직 재사용이 어렵다. (render props, HOC 등)
2. 클래스형 컴포넌트들은 진입장벽이 너무 높다.
3. 각종 생명주기 함수들 또한 이해하기 어렵다.
Hook의 사용 규칙
Hook의 종류!!
const [text, setText] = useState("")
// 아래 코드는 실시간으로 db의 변화나 get 요청이 실행될 때 마다 렌더링 시켜주는 코드입니다.
// 두번째 인자에 함수나, state값을 넣어 해당 값이 수정사항이 생길 때 마다 렌더링을 해줍니다.
const [data, setData] = useState([]);
useEffect(() => {
// 실시간 db변화 감지 및 get요청
dbService.collection("datas").onSnapshot((snapshot) => {
const dataArray = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setData(dataArray);
});
}, []);
// 사용예시
// App.js
import React, { createContext } from "react";
import Children from "./Children";
// AppContext 객체를 생성한다.
export const AppContext = createContext();
const App = () => {
const user = {
name: "안치영",
job: "개발자"
};
return (
<>
// 아래 Provider에 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
<AppContext.Provider value={user}>
<div>
<Children />
</div>
</AppContext.Provider>
</>
);
};
export default App;
// Children.js
import React from "react";
import { AppContext } from "./App";
const Children = () => {
const user = useContext(AppContext);
return (
<>
<h3>이름은 {user.name}입니다.</h3> // 이름은 안치영입니다.
<h3>직업은 {user.job}입니다.</h3> // 이름은 개발자입니다.
</>
);
};
export default Children;
위 예시에서는 하나의 컴포넌트에서만 props를 받아 사용했지만, 여러개의 컴포넌트에서 props를 사용할 경우 유용한 Hook 입니다.
이번 글에서는 여기까지만 정리하고 다음 글에서는
useReducer (복잡한 컴포넌트들의 state를 관리 및 분리)
useCallback (특정 함수 재사용)
useMemo (연산한 값 재사용)
useRef (DOM선택, 컴포넌트 안에서 조회 및 수정할 수 있는 변수관리)
useImperativeHandle
useLayoutEffect
useDebugValue
에 대해서 정리할 예정입니다.
React Hooks에 대해서 정리를 하는 과정에, 내가 몰랐던 Hook들도 꽤나 있어서 한번씩 정리하고, 읽어보는게 많은 도움이 될 것 같다.