Study/React
-
React Hooks : useReducer() 함수Study/React 2020. 1. 10. 11:42
상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다. 하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여, 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만, useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. useReducer 함수 사용법 step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성 reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 기본 형태 : function reducer(st..
-
React.memo *컴포넌트 성능 최적화Study/React 2020. 1. 9. 18:39
컴포넌트가 불필요하게 리렌더링이 된다면 앱의 성능을 떨어뜨리는 주 원인이 될 것이다. 따라서 컴포넌트의 리렌더링을 방지해주는 것이 필요한데, 그것이 바로 React.memo 함수 이다. React.memo 함수는 컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해준다, 즉, 리렌더링이 필요한 상황에서만 컴포넌트가 리렌더링 될 것이다. React.memo 사용법 1. React.memo( component ) - component : 불필요한 리렌더링 방지하고 싶은 컴포넌트 import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( //코드 생략 ); } export default Re..
-
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 Array CRUD : 배열 렌더링+추가+제거+수정Study/React 2020. 1. 7. 10:11
React에서 배열을 렌더링 하려면 어떻게 해야할까? 우선 배열 원소를 하나 하나 렌더링해야하기 때문에 재사용되는 코드가 있을 것이다. 따라서 배열 컴포넌트 외에 렌더링에 필요한 컴포넌트를 하나 더 생성한다. 그리고 동적인 데이터 처리를 위해 자바스크립트의 내장함수 map() 을 사용하여 동적인 배열을 렌더링해준다. 마지막으로 배열을 렌더링 할 때는 key라는 props를 설정해야한다. key는 배열의 각 원소들이 가지고 있는 고유값으로 설정해줘야한다. key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다. React element의 유일성 만약 각 요소에 key를 설정해주지 않으면 아래와 같은 오류 메세지가 뜬다. "Each child in a list should have ..