[React] Additional Hooks

useReducer

• 복잡한 정적 로직을 만드는 경우 사용.
• 다음 state기 이전 state에 의존적인 경우에 사용.
• Redux를 알면 쉽게 사용할 수 있음.

import { useReducer } from 'react';

const reducer = (state, action) => {
	if (action.type === 'PLUS') {
    	return {
        	count: state.count + 1
        };
    }
    return state;
}

function ExReducer() {
	const [state, dispatch] = useReducer(reducer, {count: 0});  // 첫번째 인자로 함수가 들어감.
	return (
    	<div>
        	<p>{state.count}</p>
            <button onClick={click}>ClickButton!</button>
        </div>
    );
    
    function click() {
    	dispatch({type: 'PLUS'});
    }
}

reducer

• state를 변경하는 로직이 담겨있는 함수.
• const reducer = ( state, action ) => { return newState; }    
• state는 이전 state, action은 state를 바꾸려는 객체.
• action은 객체이고 type을 필수 프로퍼티로 가짐.

dispatch

• action 객체를 넣어서 실행.

---

useMemo

특정 결괏값을 재사용하고 싶을 때 사용한다. 

import { useState, useMemo } from 'react';

function sum(persons) {
	return persons.map(person => person.age).reduce((l, r) => l + r, 0 );
}

function ExMemo() {
	const [value, setValue] = useState('');
    const [persons] = useState([
    	{name: 'James', age: 10},
        {name: 'Mike', age: 40}, 
    ]);
    
    const count = useMemo(() => {
    	return sum(persons);
    }, [persons]);
    
    
    return (
    	<div>
        	<input value={} onChange={change} />
            <p>{count}</p>
            <button onClick={click}>CLICK!</button>
        </div>
    );
    
    function change(e) {
    	setValue(e.target.value);
    }
}

 

---

useRef

import { useState, useRef, createRef } from 'react';

function ExRef() {
	const [value, setValue] = useState('');
    const input1Ref = createRef();
    const input2Ref = useRef();
    
    console.log(input1Ref.current, input2Ref.current);
    // null undefined
    // null <input>
    
    return (
    	<div>
        	<input value={} onChange={change} />  
            <input ref={input1Ref} />
             <input ref={input2Ref} />
        </div>
    );
    
    function change(e) {
    	setValue(e.target.value);
    }
}

createRef는 랜더 될 때마다 레퍼런스를 새로 만든다. 

useRef는 최초에만 undefined이고, 랜더 되어도 같은 레퍼런스를 유지한다.