리액트 훅스
-
React Hooks : useReducer() 함수Study/React 2020. 1. 10. 11:42
상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다. 하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여, 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만, useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. useReducer 함수 사용법 step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성 reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 기본 형태 : function reducer(st..
-
React Hooks : useMemo() 함수 *컴포넌트 성능 최적화Study/React 2020. 1. 8. 11:26
컴포넌트가 업데이트 되고 렌더링 될 때, 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링 되는 경우가 있다. 이런 경우 성능이 떨어지게 되는데, 이를 방지하기 위해 사용하는 것이 바로 useMemo Hook 이다. useMemo 함수는 연산된 값을 렌더링 시 재사용할 때 쓰인다. useMemo 사용법 기본 형태 : useMemo( function, deps ) - function : 어떻게 연산할 지 정의하는 함수 - deps : 검사할 특정 값을 담은 배열 (배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.) import React, { useRef, useState, useEffect, useMemo} from 'react'; import U..