[React] Hooks(2)

react

useCallback

useCallback은 렌더링 성능을 최적화할 때 사용하는 Hook이라고 할 수 있습니다. 컴포넌트에 정의해놓은 메소드를 렌더링될 때마다 재생성되는데 useCallback을 이용하면 메소드들이 재생성되는 것을 방지합니다. 또한, useCallback 정의해놓은 메소드의 재사용성을 높일 수 있으며, 메소드가 생성되는 시점을 정할 수 있는 장점이 있습니다.

const 메소드명 = useCallback(() => {

//메소드의 동작 구현
//최초 렌더링 시에만 메소드 생성, 상태변수 값을 줘서 상태변수가 변할 때마다 메소드를 재생성
}, []);

useMemo

useMemo는 연산을 최적화해주는 Hook입니다. 상태값이 변할 때만 연산이 이뤄지도록 지정할 수 있어서 불필요한 연산이 일어나는 것을 방지할 수 있습니다.

useMemo(() => {

//상태변수의 값이 변했을 때 일어날 연산

}, [상태변수]);

useMemo(() => 미리 정의해놓은 연산메소드(), [상태변수]);

useRef

 Html에서는 DOM 태그의 식별자로 id를 주로 사용했었는데 react에서는 id 대신 ref를 사용합니다. react에서 동일한 컴포넌트를 여러번 사용했을 때 id의 유일성이 파괴되기 때문에 id를 식별자로 사용할 수 없는 점이 단점입니다. JSX는 ref를 이용해서 같은 컴포넌트가 여러번 사용되어도 유일한 ref값을 지정할 수 있습니다. 유일한 ref값을 만들어주는 Hook이 useRef라고 할 수 있습니다. 또한, useRef 이용 시 선택자 없이도 해당 DOM에 접근할 수 있어 유용합니다.

const 변수명 = useRef();

//유일한 ref값을 갖는 DOM태그

<input ref={변수명}>