Hooks

useState

useState는 상태를 관리해주는 hook이다.

import React, {useState} from 'react';

//useState 예시
const Counter = () =>{
    const[value,setValue] = useState(0);
    return(
        <div>
          <p>
            {value}
          </p>
          <button onClick={()=>setValue(value+1)}>+1</button>
          <button onClick={()=>setValue(value-1)}>-1</button>
        </div>);
};

export default Counter;
		

useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

	useEffect(()=>{
        console.log("시작할때 + Counter가 다시 렌더링 될 때 마다+Counter2가 다시 렌더링 될 때 마다");
        
        return()=>{
            console.log("언마운트되기 전이나 업데이트되기 직전에 작업 수행")
        }
    });
    
    useEffect(()=>{
        console.log("시작할 때만");
    },[]);
    
    useEffect(()=>{
        console.log("시작할때 + Counter2가 다시 렌더링 될 때 마다");
    },[value2]);

useReducer

useReducer를 이용하면 상태변화 로직을 컴포넌트 밖으로 분리 할 수 있다.

import React,{useReducer} from 'react';

const reducer(state,action) =>{
    switch(action.type){
        case 'INCREMENT':
            return {value: state.value+1};
        case 'DECREAMENT':
            return {value: state.value-1};
        default:
            state;
    }
}

const Counter = () =>{
    const [state,dispatch] = useReducer(reducer,{value:0});
    
    return(
        <div>
            <p>
                {state.value}
            </p>
            <button onClick={()=>dispatch({type:'INCREMENT'})}>+1</button>
            <button onClick={()=>dispatch({type:'DECREMENT'})}>-1</button>
            
        </div>
        );
};

useMemo

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용한다.

const avg = useMemo(() => getAverage(list,[list]));

이 경우 리스트가 변경 되었을 경우에만 getAverage를 다시 실행하고 변경 되지 않은 경우 저장된 값을 사용한다.

useCallback

컴포넌트안에 있는 함수의 경우 컴포넌트가 굳이 새로 만들어 질 필요가 없는 경우에도 리렌더링시 새로 만들어진다. 그런경우 useCallback을 사용하면 특정 값이 변경 되는 경우에만 다시 만들어지도록 할 수 있다.

const func = useCallback(()=>{},[]);

함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.

useRef

useRef를 사용하면 특정 DOM에 직접 접근 할 수 있다.

const inputRef = useRef(null);

<input ref = {inputRef}/>
  

Hook의 규칙

최상위에서만 Hook을 호출해야 한다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안 된다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장된다.

오직 React 함수 내에서 Hook을 호출해야 한다

Hook을 일반적인 JavaScript 함수에서 호출하지 말아라.

• React 함수 컴포넌트에서 Hook을 호출하여라
• Custom Hook에서 Hook을 호출하여라
  이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.

ESLint 플러그인

이 두 가지 규칙을 강제하는 eslint-plugin-react-hooks 가 있다

npm install eslint-plugin-react-hooks --save-dev

를 통해 설치 가능

React 가 Hook이 호출되는 순서에 의존하여 특정 state가 어떤 useState 호출에 해당하는지 알 수 있기 때문에 위의 규칙을 지켜야 한다

Custom Hook 만들기

사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수이다. 사용자 Hook은 다른 Hook을 호출할 수 있다.

import {useState, useEffect} from 'react';

function useFriendStatus(friendID){
	const [isOnline, setIsOnline] = useState(null);
    
    useEffect(() => { 
    	function handleStatusChange(status){
        	setIsOnline(status.isOnline);
        }
        
        ChatAPI.subscribeToFriendStatus(friendID,handleStatusChange);
        return () => {
        	ChatAPI.unsubscribeFromFriendStatus(friendId,handleStatusChange);
            };
        });
        
    return isOnline;
}

function FriendStatus(props){
	const isOnline = useFriendStatus(props.friend.id);
    
    if (isOnline === null){
    	return 'Loading...';
    }
    
    return isOnline ? : 'Online': 'Offline';
}