Hooks

1. useState

• 값을 변경하는 훅

2. useEffect

• 랜더링될 때마다 특정 작업을 수행하도록 설정하는 훅

const Info = () => {
	useEffect(() => {
    	console.log('렌더링 성공');
        console.log({
        	name,
            nickname
        });
    });
};

• 마운트될 때만 실행하고 싶을 때
  • 함수의 두 번째 파라미터에 비어있는 배열 넣어주기
    • 두 번째 파라미터에 값을 넣어주면, 그 값이 업데이트 될 때마다 useEffect(); 실행됨.

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

• 특정 값이 업데이트될 때만 실행하고 싶을 때
  • name이 업데이트될 때만, 업데이트를 콘솔창에 출력.

useEffect(() => {
	console.log(name);
}, [name]);

• 뒷정리 하기
  • 컴포넌트가 언마운트되기 전 or 업데이트되기 직전에 어떤 작업을 수행하고 싶을 때
    • useEffect에서 뒷정리 함수를 반환.

useEffect(() => {
	console.log('effect');
    console.log(name);
    
    return() => {
    	console.log('cleanup');
        console.log(name);
    };
    
});

3. useReducer 

• useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용
• 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태로 반환하는 함수
• 문법

function reduver(statem action) {
	return {...};		//불변성을 지키면서 업데이트한 새로운 상태를 반환
}

• 예제

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 state;
    }
}

const Counter = () => {

    //useReducer(a, b);
        //a : 리듀서 함수
        //b : 해당 리듀서의 기본값.
    //Hook을 사용하면 state, dispatch함수 받아옴.
    //state : 현재 가리키고 있는 상태
    //dispatch : 액션을 발생시키는 함수.
    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>
    );

};

export default Counter;

4. useMemo

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

import React, {useState} 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 Average123 = () => {
    const [list, setList] = useState([]);
    const [number, setNumber] = useState('');

    const onChange = e => {
        setNumber(e.target.value);
    };
    const onInsert = e => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber('');
    };

    return(
        <div>
            <input value = {number} onChange = {onChange} />
            <button onClick = {onInsert}>등록</button>
            <ul>
                {list.map( (value, index) => (
                    <li key = {index}>{index}</li>   
                ))}
            </ul>
            <div>
                평균값 : {getAverage(list)}
            </div>
        </div>
    );

};

export default Average123;

5. useCallback. useRef