커스텀훅을 프로젝트 도입전에 리액트 공부 겸 Hook에 대해 정확히 설명 할 정도의 지식을 얻고가고자한다.
1. Hook이란
16.8 이전에는 함수형 컴포넌트, 클래스형 컴포넌트를 함께 사용하며 일반적으로 함수형 컴포넌트를 사용하였으나, 값의 상태를 관리(state) 혹은 Lice Cycle Method(생명 주기=컴포넌트가 생성되고 사라지는 과정이 존재 할 때)를 사용하여야 할 때에만 클래스형 컴포넌트(Class Component)를 사용하였다.
클래스형 컴포넌트는
- 코드의 구성이 어렵고 Component의 재사용성이 떨어진다.
- 컴파일 단계에서 코드 최적화를 어렵게 한다.
- 최신 기술의 적용이 효과적이지 않다.
이러한 단점이 있다 이걸 보완해서 나온게 리액트 훅이다
의외로 규칙이 있었는데 훅을 사용할때 항상 상위에 존재해서 이런 규칙이 있는줄도 몰랐다
- 리액트 Hook은 반복문, 조건문 혹은 중첩된 함수 내에서 호출하면 안되며 반드시 최상위(at the Top Level)에서만 Hook을 호출해야 한다. 또한 Hook은 렌더링 시 항상 동일한 순서로 호출 되어야 한다.
- Hook은 React 함수 내에서만 호출 해야 한다. 즉, 리액트 Hook은 함수형 컴포넌트(Functional Component) 에서 호출해야 하며, 추가적으로 custom hooks에서 또한 호출이 가능하다.
hook에는 대표적으로 사용하는 useState, useEffect와 같은게 있다. (이때까지 아무생각 없이 씀)
1. useState
useState는 Component에서 상태(state)값을 추가 할 때 사용되며, 클래스형 컴포넌트(Class Component)에서만 사용 가능하던 State를 함수형 컴포넌트(Functional Component)에서도 사용 가능 하도록 한 대표적인 기능이다.
선언은 const [변수명, 상태를 업데이트 할 함수명] = useState(초기값) 을 통해 할 수 있으며, useState로 선언된 변수는 상태(state)가 변할 때 마다 페이지를 리렌더링 시키게 된다. 이 때 (상태를 업데이트 할 함수명)은 비동기로 처리 되는데, 이는 함수가 호출 될 때 마다 컴포넌트르 리렌더링한다 React의 Virtual DOM은 변경된 부분만을 감지하고 효율적으로 업데이트합니다.
2. useEffect
useEffect는 화면이 렌더링 될 때마다, 특정 작업을 실행 할 수 있도록 하는 Hook이다. 이를 통해 함수형 컴포넌트(Functional Component)에서 Side Effect를 사용 할 수 있게 됐을 뿐만 아니라, 클래스형 컴포넌트(Class Component)의 Life Cycle Method에서 사용되는 componentDidMount(최초 렌더링) 와 componentDidUpdate(렌더링 후 업데이트)를 합친 형태로, 페이지가 렌더링 될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터들을 처리해준다.
선언은 useEffect( () => {익명함수}, []) 이며 매개변수는 보이는것과 같이 익명함수와 빈 배열이다. 뒤의 빈 배열의 종류에 따라 렌더링의 횟수를 조절 할 수 있다.1. [] = 최초 렌더링(마운트) 될 때 한번만 실행2. [상태값1, 상태값 2..] = 선언한 상태값들이 업데이트 될 때만 실행3. 생략 = 리렌더링시마다 반드시 실행
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});위와 같이 return문을 작성하게 되면 컴포넌트가 unmount될 때 즉, 컴포넌트에서 벗어나거나 페이지가 이동 될 때 발생하게 된다
대표적으로 두개의 훅이 자주 사용된다. 커스텀훅 사용전에 내가 몰랐던 사실을 알아갈 수 있을까봐, 간단하게 알아보았다 시간이 된다면 useState와 useEffect에 대해 조금 더 코어하게 공부해봐도 괜찮지 않을까.
