React Hooks
-
React Hooks : useContext() & Context API : createContext()Study/React 2020. 1. 11. 10:49
리액트로 개발을 하다보면 특정 함수나 값을 원하는 컴포넌트에게 전달하기 위해서, 여러 개의 컴포넌트를 거치고 거쳐서 전달해야하는 경우가 많다. 컴포넌트 1,2개 정도는 중간 다리 역할로 괜찮지만 그 이상 넘어가버리면 굉장히 복잡할 것이다. 이러한 경우를 방지하기 위해서는 Context API 를 사용해야한다. React Context API 를 사용하면 컴포넌트 상관없이 전역적으로 특정 값을 사용할 수 있다. Context API 사용법 - createContext : context 생성 - useContext : context 조회 step1) createContext, useContext Hooks를 불러온다. import React, { createContext, useContext } from '..
-
React Hooks : useReducer() 함수Study/React 2020. 1. 10. 11:42
상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다. 하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여, 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만, useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. useReducer 함수 사용법 step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성 reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 기본 형태 : function reducer(st..
-
React Hooks : useCallback() 함수 *컴포넌트 성능 최적화Study/React 2020. 1. 9. 10:56
useCallback 은 useMemo를 기반으로 만들어져서 두 개는 비슷한 점을 가진 Hooks 이다. useMemo는 특정 결과값을 재사용 할 때 쓰고, useCallback은 특정 함수를 재사용 할 때 사용한다. useCallback를 사용할 때 함수 안에서 사용하는 state, props가 있다면, 반드시 deps 배열 안에 포함시켜야한다. 그리고 컴포넌트에서 prosp로 함수를 받아왔다면 그 함수도 deps에 포함시켜야한다. 함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야한다. 그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다. useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로..
-
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..
-
React Hooks : useEffect() 함수Study/React 2020. 1. 6. 11:57
useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다. 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다. useEffect() 사용법 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 import React, { useEffect } from 'react'; useEff..