🤔 React... 많이 쓰는데 불편했어요 (Hooks API 등장 배경)
-
React는 2013년에 처음 세상에 나왔고 2018년까지 전세계적으로 꾸준히 많이 사용되고 있었습니다.
-
당시까지 React에서 상태를 가지는 컴포넌트를 만들 수 있는 방법은 class를 사용하는 방법 뿐이었어요.
class의 문제점
1) 로직 재사용성 힘들어
여러 컴포넌트에서 공통으로 사용하는 로직이 있어 재사용하고 싶은 경우 있죠?
😢 하지만 class에서는 재사용하기 힘들었어요.
2) 중복과 관심사 분리 힘들어
복잡해질수록 점점 컴포넌트가 뚱뚱해집니다.
다양한 라이프사이클에 다양한 관심사의 로직이 흩어지는 일이 자주 발생하였습니다.
같은 로직이 여러 라이프사이클 메서드에 중복되는 일도 많았어요.
Hooks API의 등장
결국 React 16.8부터 Hooks API를 제공합니다.
-
class 없이도 React에서 제공하는 기능들을 사용할 수 있는 방법을 제공하기로 한 것이죠.
-
React가 기본적으로 제공해주는 몇 가지 hooks가 있어요.
-
필요하다면 자신만의 커스텀 hook을 만들어 사용할 수도 있습니다.
- 💪 커스텀훅을 통해
첫번째 문제인 컴포넌트 간의 로직 재사용을 해결할 수 있게 되었습니다. (아주 나이스!)
- 💪 커스텀훅을 통해
useEffect: 너무 편한 LifeCycle
useEffect(
() => {
// render 이후 업데이트
return () => {
// cleanup - unmount
}
},
[dependencies]
);
- 컴포넌트의 라이프사이클에서 필요한 시점에 필요한 로직들을 모아서 작성할 수 있도록 해줍니다.
- 💪 useEffect를 사용하여
두번째 문제인 라이프 사이클의 중복과 관심사 로직 흩어짐을 해결할 수 있어요. (아주 나이스!)
- 💪 useEffect를 사용하여
🤔 생각해보기
class 컴포넌트는 더 이상 필요가 없을까요?
React Class를 사용해야만 하는 경우가 있긴 있어요
1. The component needs to maintain state.
2. The component is re-rendering too much and you need to control that via "shouldComponentUpdate"
3. You need a container component.'함수'가 어떻게 '상태'를 가질 수 있는 걸까요?
- 글쎄요... useState를 통해 함수 내에서 상태를 만들어주고 있는데요, 이는 useState의 동작 방식에 대해서 알아야할 것 같아요.
function useState(initialValue) {
var _val = initialValue;
function state() {
return _val;
}
function setState(newVal) {
_val = newVal;
}
return [state, setState];
}-
useState훅을 통해 상태를 만들면 클로저를 활용하여 해당 지역 변수를 참조하거나 수정할 수 있네요.
-
useState를 함수 내에서 사용하면 클로저를 활용하게 되어 실질적으로는 외부에서 상태를 만들어 사용한다고 봐도 될까요..?
Hooks를 사용할 때 반드시 지켜야 하는 사용 규칙은 무엇인가요?
-
최상위에서만 Hook을 호출해야 합니다.
-
반복문, 조건문, 중첩된 함수내에서 호출하면 안됩니다.
-
ealry return 이 실행되기 전에 호출되어야 합니다.
📖 결론적으로 항상 동일한 순서로 Hook이 호출되는 것이 보장하여 useState나 useEffect가 여러 번 호출되어도 Hook의 상태를 올바르게 유지할 수 있도록 해줘야합니다.
