Hooks란?

-함수컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌

사용법

useState 함수의 파라미터에는 상태의 기본값을 넣어줌 => 이 함수가 호출되면 배열을 반환함 첫번째 값은 원소의 상태 값 두번째 원소는 상태를 설정하는 함수 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됨

const Counter = () => {
    const [value, setValue] = useState(0); // 두번째 값으로 호출 
    return (
        <div>
            <p>
               현재 카운터 값은 <b>{value}</b>입니다. 
            </p>
            <button onClick={() => setValue(value + 1)}> +1 </button> {/*여기서 호출 됨*/}
            <button onClick={() => setValue(value - 1)}> -1 </button>
        </div>
    );
};

useState를 여러번 사용하기

하나의 useState 함수는 하나의 상태값만 관리 가능
즉 여러개를 관리하고 싶다면 여러개를 사용하면 됨

예시코드

const Info = () => {
    const [name, setName] = useState('');
    const [nickName, setNickName] = useState('');

    const onChangeName = e => {
        setName(e.target.value);
    }

    const onChangeNickName = e => {
        setNickName(e.target.value);
    }

    return (
        <div>
            <div>
                <input value={name} onChange={onChangeName} />
                <input value={nickName} onChange={onChangeNickName} />
            </div>
            <div>
                <div>
                    <b>이름:</b> {name}
                </div>
            </div>
            <div>
                <div>
                    <b>닉네임:</b> {nickName}
                </div>
            </div>
        </div>
    );
};

#useEffect 사용하기

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hooks 임 클래스형의 componentDidMount 와 componentDidUpdate가 합쳐진 형태로 생각하면 됨

예시코드

useEffect(() => {
        console.log('렌더링 완료');
        console.log({
            name,
            nickName
        });
    });

마운트 될 때만 useEffect를 실행하고 싶을 때

useEffect(() => {
        console.log('마운트 될 때만 실행');
        }, []);
// 이런식으로 빈배열을 넣어주면 됨
// 배열에 [name] 이렇게 넣어주면 해당값만 출력함

이런식으로 빈배열을 넣어주면 됨
배열의 파라미터에 무엇을 넣냐에 따라 달라짐

useReducer

useReducer는 useState를 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용하는 Hook임

***주의사항 리듀서함수에서 새로운 값을 만들 떄는 반드시 불변성을 지켜야함

function reducer(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return { value : state.value + 1 };
        case 'DECREMENT':
            return { value : state.value - 1 };
        default:
            return state;        
    }
}



const Counter = () => {
    const [state, dispatch] = useReducer(reducer, {value: 0});
    return (
        <div>
            <p>
               현재 카운터 값은 <b>{state.value}</b>입니다. 
            </p>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}> +1 </button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}> -1 </button>
        </div>
    );
};

useReducer 첫번째 파라미퍼에는 리듀서 함수를 넣고 두번째 파라미터에는 기본값을 넣어줌 Hook을 사용하면 state값과 dispatch 함수를 받아옴. dispatch는 액션을 발생시키는 함수 dispatch(action) 과 같은 형태

useReducer 를 사용했을 때 장점?

컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것

useMemo

useMemo를 사용하면 연산을 최적화할 수 있음 예시 코드

import React, { useState,useMemo } from 'react';

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

    return (
        <div>
            <input value={number} onChange={onChange} />
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map((value, index) => (
                <li key={index}>{value}</li>
                ))}
            </ul>
            <div>
                <b>평균값:</b> {avg} // 이렇게 작성하면 배열이 바뀔때만 호출됨
            </div>
        </div>
    );

useCallback

useCallback은 useMemo와 비슷한 함수임.
렌더링을 최적화해야하는 상황에서 사용함 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있음
사용법 첫번째 파라미터에는 생성하고 싶은 함수를 넣고, 두번째 파라미터에는 배열을 넣으면 됨. 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야하는지 명시해야함

useRef

useRef를 사용하여 ref 값을 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킴