8장 Hooks

8.1 useState

함수형 컴포넌트에서 상태 관리가 필요할 때 사용.

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

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>
                    <b>닉네임 : </b> {nickName}
                </div>
            </div>
        </div>
    );
}

export default Info;

8.2 useEffect

컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정

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

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

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

    });

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

    return (
	    ...
    );
}

export default Info;

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

useEffect(() => {
	console.log('마운트될 때만 실행');
},[]);

8.2.2 특정 값이 업데이트될 때만 실행하고 싶을 때

useEffect(() => {
	console.log('마운트될 때만 실행');
},[name]);

8.2.3 뒷정리하기

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 작업 수행

//컴포넌트가 나타날 때 콘솔에 effect가 나타나고, 사라질 때 clean up이 나타남
useEffect(() => {
	console.log('effect');
	console.log(name);
	return () => {
		console.log('clean up');
		console.log(name);
	}
});

// 오직 언마운트될 떄만 뒷정리 함수를 호출하고 싶다면 두 번째 파라미터에 비어있는 배열을 넣으면 됨
useEffect(() => {
	console.log('effect');
	console.log(name);
	return () => {
		console.log('clean up');
		console.log(name);
	}
}, []);

8.3 usereducer

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용.
• 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수.
• 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 함.
• useReducer에서 사용하는 액션 객체는 반드시 type을 지니고 있을 필요 없음( <-> 리덕스는 액션 객체에 type이 필수)
• 컴포넌트 업데이트로직을 컴포넌트 바깥으로 빼낼 수 있게 해 줌

//
import React, {useReducer} from "react";

function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {value: state.value + 1};
        case 'DECREMENT':
            return {value: state.value - 1};
        default :
            return this.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>
    );

}

export default Counter;


//
import React, {useReducer} from "react";

function reducer(state, action) {
    return {
        ...state,
        [action.name]: action.value
    }
}

const Info = () => {
    const [state, dispatch] = useReducer(reducer, {
        name: '',
        nickname: ''
    })
    const {name, nickname} = state;
    const onChange = e => {
        dispatch(e.target);
    }
    return (
        <div>
            <div>
                <input name="name" value={name} onChange={onChange}/>
                <input name="nickname" value={nickname} onChange={onChange}/>
            </div>
			...
        </div>
    );
}

export default Info;

8.4 useMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화해줌

8.5 useCallback

랜더링 성능을 최적화하기 위해 사용.(useMemo와 유사) 
이벤트 핸들러 함수를 필요할 때만 생성할 수 있게 해 줌.

숫자, 문자열, 객체처럼 일반 값을 재사용하려면 useMemo, 함수를 재사용하려면 useCallback

//useMemo vs useCallback
useMemo(() => {
	const fn = () => {
    	console.log('hello world!');
    }
    return fn;
}, [])

useCallback(() => {
	console.log('hello world');
}, [])


//useMemo, useCallback 사용 예시
import React, {useState, useMemo, useCallback, useRef} from "react";

const getAverage = (numbers) => {
    console.log('평균값 계산 중...');
    if (numbers.length === 0) return 0;
    const sum = numbers.reduce((a, b) => a + b);
    return sum / numbers.length;
}


const Average = () => {
    const [list, setList] = useState([]);
    const [number, setNumber] = useState('');
    const inputEl = useRef(null);

    const onChange = useCallback(e => {
        setNumber(e.target.value);
    }, []); //컴포넌트가 처음 랜더링될 때만 함수 생성

    const onInsert = useCallback(e => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber('');
        inputEl.current.focus();
    }, [number, list]); //number 혹은 list가 바뀌었을 때만 함수 생성

    const avg = useMemo(() => getAverage(list), [list]); //특정 값이 바뀌었을 때만 연산을 실행하도록 useMemo로 연산함수를 감쌈.
    return (
        <div>
            <input value={number} onChange={onChange} ref={inputEl}/>
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map((value, index) => <li key={index}>{value}</li>)}
            </ul>
            <div><b>평균값 : </b>{avg}</div>
        </div>
    );
}

export default Average;

 

8.6 userRef

• ref를 설정한 useRef를 통해 만든 객체 안의 current값이 실제 엘러먼트를 가리킴.
• 컴포넌트 로컬 변수를 사용해야 할 때도 useRef를 활용할 수 있음. (렌더링과 상관없이 바뀔 수 있는 값)

import React, {useRef} from "react";

const RefSample = () => {
    const id = useRef(1);
    const setId = (n) => {
        id.current = n;
    }
    const printId = () => {
        console.log(id.current);
    }

    return (
        <div>
            refsample
        </div>
    )
}
export default RefSample

8.7 커스텀 Hooks 만들기

//커스텀 훅 만들기
import React, {useReducer} from "react";

function reducer(state, action) {
    return {
        ...state,
        [action.name]: action.value
    }
}

export default function useInputs(initialForm) {
    const [state, dispatch] = useReducer(reducer, initialForm);
    const onChange = e => {
        dispatch(e.target);
    }
    return [state, onChange];
}


//커스텀 훅 사용
import React, {useReducer} from "react";
import useInputs from "./useInputs";

const Info = () => {
    const [state, onChange] = useInputs({name: '', nickname: ''})
    const {name, nickname} = state;

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

export default Info;