📝 성장을 위한 기록
-
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..
-
React Hooks : useRef() 함수Study/React 2020. 1. 5. 10:21
자바스크립트에서 특정 DOM 을 선택해야할 때는 DOM Selector를 사용한다. 리액트 프로젝트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야한다거나 특정 DOM을 선택해야할 상황이 있다. 이런 경우, 리액트 함수형 컴포넌트에서는 React Hooks 중 하나인 useRef() 함수를 사용한다. 클래스형 컴포넌트에서는 콜백함수를 사용하거나 React.createRef 함수를 사용한다. useRef() 함수 사용법 초기화 버튼 누르면 input 태그에 focus 잡히는 기능 구현하기 InputTest.js import React, { useState, useRef } from 'react'; function InputTest() { const [text, setText] = useState(..
-
React Hooks : useState() 함수Study/React 2020. 1. 4. 10:25
리액트 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다. React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 힘들었다. 하지만 리액트 16.8 버전부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 됐다. Hooks 중에 useState() 함수가 있는데, 이를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다. useState( ) 함수 사용법 Counter.js import React, { useState } from..