Study
-
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 ..
-
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..