[React] Hooks

useState

이전 게시글로 대체

 

useEffect

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

위와 같은 코드를 작성하게 되면, 기존에 명시된 info에 관련 정보를 출력

마운트만 실행하고자 할 때, 두 번째 파라미터는 비어있는 배열

  useEffect(()=>{console.log("마운트!")},[]);

특정 값이 업데이트될 때만 실행

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

 

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook

현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수

새로운 상태를 만들 때, 불변성을 지키는 건 필수

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

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, { value: 0 });
    
    return (
    	...
        <button onClick={()=>dispatch({ type: 'INCREMENT' })}>+1</button>
        <button onClick={()=>dispatch({ type: 'DECREMENT' })}>-1</button>
    	...

꼭 형태가 타입이 아니어도 되며, input 태그를 이용해서 setState를 해준 것과 유사한 방식으로 작업 처리도 가능

 

useMemo

최적화 작업, 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행, 원하는 값이 바뀌지 않았다면 연산했던 결과를 다시 사용

 

useCallback

주로 렌더링 성능을 최적화해야 하는 상황에 만들어 놨던 함수를 재사용, useMemo와 비슷

첫 번째 파라미터에는 생성하고 싶은 함수, 두 번째 파라미터에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는 지 명시하는 배열

 

useRef

Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정

Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르킴. 즉 ref 를 쉽게 사용할 수 있게 만드는 함수