[리액트 기초] 리액트 Hook - useState,useEffect,useReducer,useMemo,useCallback,useRef

useState

함수형 컴포넌트

const [value, setValue] = useState('');
const [name,setName] = useState('');

return (
	<div>
    	<button onClick={()=>setValue(value+1) }
        {value}
        
        <input value={name} 
        	   onChange(e=> setName(e.target.value)) />
       {name}
        			
    </div>
)

 

 

useEffect

렌더링 될때마다 특정 작업 수행

useEffect(()=> {
	console.log() }, [] : 마운트
    [name] : 특정 값 업데이트 }

 

 

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다른 값으로 업데이트

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

const Info = () => {

	const [state,dispatch] = useReducer(reducer, 
    	  { name :' ', nicName : ' ' })
    const {name, nicName } = state;
    const onChange = e => {
    	dispatcj(e.target); }
}

useMemo

함수형 컴포넌트 내부 연산 최적화

const avg = useMemo(()=> getAvg(list), [list]);
<div> {avg} </div>

 

 

useCallback

useMomo와 비슷하지만 렌더링 상황 최적화할 때 사용된다.

 

 

 

useRef

const inputEl = useRef(null)
<input ref={inputEl} />


//이벤트
{inputEl.current.focus() }