[ React ]처음 만난 리액트_6-2_Hook의 규칙 & Custom Hook ( 강좌 참고 )

📌  Hook의 규칙

• Hook은 무조건 최상위 레벨에서만 호출해야 한다. ( 리액트 함수 컴포넌트의 최상위 레벨 ) -> 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.
• 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.

---

📌 Custom Hook 만들기

기본적으로 제공되는 Hooks 이외에 추가적으로 필요한 기능이 있다면 직접 Hook을 만들어서 사용할 수 있다.

이것이 Custom Hook이다.

 

Custom Hook을 만드는 이유는 여러 컴포넌트에서 반복적으로 사용되는 로직을 Hook으로 만들어 재사용하기 위함이다.

 

Custom Hook을 만들어야 하는 상황

예제 코드 )

import React, {useState, useEffect} from "react";

function UserStatus(props){
    const [isOnline, setIsOnline]  = useState(null);
    
    usseEffect(() => {
        function handleStatusChange(status){
            setIsOnline(status.isOnline);
        }
        
        ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
        return () => {
            ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
       };
   });
   
   if (isOnline === null){
       return '대기중...';
   }
   return isOnline ? '온라인' : '오프라인';
}

//코드 참고
//인프런_처음 만난 리액트

위 코드는 UserStatus 라는 컴포넌트는 isOnline 이라는 State에 따라서, 사용자의 상태가 온라인인지 아닌지를 텍스트로 보여주는 컴포넌트이다.

 

만약 온라인인 사람의 이름을 초록색으로 표시하고 싶다면?

컴포넌트의 이름을 UserListItem이라고 하고, 여기에 비슷한 로직을 넣어야 한다 

아래 코드처럼 만드는 것이다.

import React, {useState, useEffect} from "react";

function UserListItem(props){
    const [isOnline, setIsOnline]  = useState(null);
    
    usseEffect(() => {
        function handleStatusChange(status){
            setIsOnline(status.isOnline);
        }
        
        ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
        return () => {
            ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
       };
   });
   
   return (
       <li style={{ color: isOnline ? 'green' : 'black' }}>
           {props.user.name}
       </li>
   );
}

//코드 참고
//인프런_처음 만난 리액트

중복되는 로직을 찾아 Custom Hook으로 추출하겠다.

2개의 자바스크립트 함수에서 하나의 로직을 공유하고 싶을 때에는 새로운 함수를 하나 만드는 방법을 이용한다.

리액트 함수 컴포넌트와 Hook은 모두 함수이기 때문에 동일한 방법을 사용할 수 있다.

 

• 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

import React, {useState, useEffect} from "react";

function useUserStatus(userId){
    const [isOnline, setIsOnline]  = useState(null);
    
    usseEffect(() => {
        function handleStatusChange(status){
            setIsOnline(status.isOnline);
        }
        
        ServerAPI.subscribeUserStatus(userId, handleStatusChange);
        return () => {
            ServerAPI.unsubscribeUserStatus(userId, handleStatusChange);
       };
   });
   
   return isOnline;
}

//코드 참고
//인프런_처음 만난 리액트

이 코드는 중복되는 로직을 useUserStatus 라는 Custom Hook으로 추출한 것이다.

function UserStatus(props){
    const isOnline = useUserStatus(props.user.id);
    
    if(isOnline === null){
        return '대기중...';
    }
    return isOnline ? '온라인' : '오프라인';
}

function UserListItem(props){
    const isOnline = useUserStatus(props.user.id);
    
    return(
        <li style={{ color: isOnline ? 'green' : 'black' }}>
            {props.user.name}
        </li>
    );
}

//코드 참고
//인프런_처음 만난 리액트

이 코드는 useUserStatus Custom Hook을 사용한 코드이다. Custom Hook을 사용하기 전 코드왇 동일하게 작동한다.

동작의 변경이 없고, 중복된 로직만을 추출하여 Custom Hook만을 만들었기 때문이다.

 

Custom Hook의 이름은 꼭 use로 시작해야하나?

그렇다. 이건 지켜야 한다.

만약 이름이 use로 시작하지 않는다면 특정 함수의 내부에서 Hook을 추출하는 지 알 수 없기 때문에 Hook의 규칙 위반 여부를 확인하기 힘들다.

 

같은 Custom Hook을 사용하는 2개의 컴포넌트는 State를 공유하는 것인가?

아니다. Custom Hook을 단순히 State와 연관된 로직을 재사용이 가능하게 만든 것이다.

따라서, 여러 개의 컴포넌트에서 하나의 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 State와 effects는 전부 분리되어 있다.

 

Custom Hook을 어떻게 State를 분리하는 것인가?

리액트 컴포넌트는 각각의 Custom Hook 호출에 대해서 분리된 State를 얻게 되기 때문이다.

또한, 각 Custom Hook의 호출도 완전히 독립적이다.

 

Hook들 사이에서 데이터를 공유하는 방법은 있나?

예제 코드 )

const userList = [ 
    { id: 1, name: 'Inje' },
    { id: 2, name: 'Mike' },
    { id: 3, name: 'Steve' },
];

function ChatUserSelector(props){ //컴포넌트.
	//현재 선택된 사용자의 id를 저장하기 위한 용도.
    const [userId, setUserId] = useState(1); //useState Hook을 사용해 userId라는 State 생성.
    //setUserId 함수를 통해 userId가 변경될 때마다 userUserStatus Custom Hook은 이전에 선택된
    //취소하고 새로 선택된 사용자의 온라인 여부를 알아내게 된다.
    const isUserOnline = useUserStatus(userId); //userId는 useUserStatus Custom Hook에 파라미터로 들어감.
    
    return(
        <>
            <Circle color={isUserOnline ? 'green' : 'red'} />
            <select
                value={userId}
                onChange={event => setUserId(Number(event.target.value))}
            >
                {userList.map(user => (
                    <option key={user.id} value={user.id}>
                        {user.name}
                    </option>
                ))}
            </select>
        </>
    );
}

//코드 참고
//인프런_처음 만난 리액트

위 코드는 ChatUserSelector 라는 컴포넌트가 나온다.

이 컴포넌트는 select 태그를 통해 목록에서 사용자를 선택할 수 있게 해주며 사용자를 선택할 경우 해당 사용자가 온라인인지 아닌지를 보여주게 된다.

 

Hook들 사이에서는 위 코드 주석과 같은 방법으로 데이터를 공유한다.

---

 

🐱‍💻 Hooks 사용해보기

🤍 useCounter() Custom Hook 만들기

create react app을 이용해 만든 프로젝트를 연다.

 

useCounter.jsx

//useCounter 이름의 React Hook을 만든다.
import React,{useState} from "react";

function useCounter(initialValue){
    const [count, setCount] = useState(initialValue); 

    const increaseCount = () => setCount((count) => count + 1);
    const decreaseCount = () => setCount((count) => Math.max(count - 1, 0));
    
    return [count, increaseCount, decreaseCount];
}

export default useCounter;

useCounter Hook은 초기 카운터 값을 파라미터로 받아서 count 이름의 state를 생성하여 값을 제공하고, count 증가 및 감소를 편리하게 할 수 있도록 함수를 제공하는 Hook이다.

---

🤍 Accommodate 컴포넌트 만들기

Accommodaate.jsx

 

//Accommodate 이름의 React 함수 컴포넌트를 만든다.
import React, {useState, useEffect} from "react";
import useCounter from "./useCounter";

const MAX_CAPACITY = 10; //최대 카운트 갯수 상수로 정의.

function Accommodate(props){
    const [isFull, setIsFull] = useState(false);
    const [count, increaseCount, decreaseCount] = useCounter(0);

    useEffect(() => { //의존성 배열 없는 형태.
        //컴포넌트가 마운트된 직후에 호출되며 컴포넌트 업데이트될 때마다 호출.
        console.log("----------");
        console.log("useEffect() is called");
        console.log(`isFull: ${isFull}`);
    });

    useEffect(() => { //의존성 배열 있는 형태.
        //컴포넌트가 마운트된 직후에 호출되며 이후 카운트 값이 바뀔 때마다 호출.
        //이때 용량이 가득 찼는지 확인한다. => isFull state에 저장.
        setIsFull(count >=MAX_CAPACITY); //카운트 갯수가 최대 용량을 초과하면 경고문구 표시되면 입장 불가.
        console.log(`Current count value: ${count}`);
    },[count]);

    return (
        <div style={{padding:16}}>
            <p>{`총 ${count}명 수용했습니다.`}</p>
            <button onClick={increaseCount} disabled={isFull}>
                입장
            </button>
            <button onClick={decreaseCount}>퇴장</button>
            {isFull && <p style={{color:"red"}}>정원이 가득 찼습니다.</p>}
        </div>
    );
}

export default Accommodate;

Accommodate 컴포넌트는 useCount Hook을 사용하여 count를 관리한다.

---

이제 실제 화면에 렌더링하기 위해서 index.js 파일을 수정해야 한다.

---

실행 결과

입장을 누르면 count 값이 1 증가하는 것을 볼 수 있다.

정원이 가득 차면 isFull 값이 true 가 되서 입장 버튼이 비활성화 된다.

퇴장 버튼을 누르면 count 값이 1 감소하면서 isFull값이 false로 변한다.

아무리 퇴장 버튼을 눌러도 0 이하로는 변하지 않는다.

function useCounter(initialValue){
    const [count, setCount] = useState(initialValue); 

    const increaseCount = () => setCount((count) => count + 1);
    const decreaseCount = () => setCount((count) => Math.max(count - 1, 0));
    
    return [count, increaseCount, decreaseCount];
}

Math.max 함수를 사용하여  count 값이 0 아래로 내려갈 수 없게 만들어놨다.

0이 되면 더 이상 useEffect Hook도 호출되지 않는다.

---

- <강좌> 처음 만난 리액트

https://www.inflearn.com/

[무료] 처음 만난 리액트(React) - 인프런 | 강의