리액트 Hooks

useState

 

가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태 지님

함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook 사용

useState 기능을 사용해서 숫자 카운터를 구현

useState 함수의 파라미터에는 상태의 기본값 넣어줌 

이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트 정상적 리렌더링

 

useEffect

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

클래스형 컴포넌트의 componentDidMount와 componentDidupdate를 합친형태

useEffect(()=> {

console.log('렌더링이 완료되었습니다')

console.log({

name, nickname });

});

 

특정 값이 업데이트 되고 싶을 때

useEffect(() => {

console.log(name);

},[name]);

 

useMemo

인풋값이 등록이 안되어있어도  수정되었을 때도 함수들이 리렌더링하는 것을 막아서 효율적으로 렌더링하게 할

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

 

useCallback 

useMemo와 상당히 비슷한 함수 주로 렌더링 성능을 최적화해야 하는 상황에서 사용함

이 HOOk을 사용하면 만들어놨던 함수를 재사용 가능함

const onInsert = useCallback (() => {

const nextList = list.concat(parseInt(number));

setList(nextList)

setNumber(' ');

}, [number,list]);

 

useRef

useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트 값을 가리킨다.