hooks

useCallbackuseCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useMemo 에서 작성했던 Average 컴포넌트의 경우, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 이 방식의 경우 크게 문제는 없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. useCallback 사용하기const onChange = useCallback(e=>{ setNumber(e.target.value); }..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻한다. memoization을 잘 활용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. useMemo의 구조 const value = useMemo(()=>{ return calculate(); },[item]) useMemo는 useEffect처럼 첫 번째 인자로 함수인 calculate()를 호출하여 결과값을 반환한다. calculate 함수는 여기서 비용이 많이 드는 계..

useReducer 이전까지 상태를 업데이트 할 때는 useState를 사용해서 새로운 상태를 설정해주었는데, 상태를 관리할 때 useState를 사용하는 것 말고도 다른 방법이 있다. 바로 useReducer을 사용하는 것인데, useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state,actio..

Hooks React Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능을 할 수 있게 해준다. 훅을 사용하면 클래스 컴포넌트보다 훨씬 더 간결하고 직관적인 코드를 작성할 수 있어, 프로젝트의 유지보수를 높일 수 있다. 지난번 글에서 다뤘던 useState도 React Hooks의 한 종류이며, 리액트의 가장 대표적인 Hook으로 useState와 useEffect를 꼽을 수 있다. 이외에도 useReducer, useMemo, useCallback, useRef등 다양한 훅이 있으며 오늘은 useEffect에 대해 다..