react
-
React - useMemo와 useCallbackReact/기본 2020. 11. 15. 23:03
useMemo란? 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시킬 수 있는 Hooks를 말한다. 예제를 통해 알아보자. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트를 작성해보자. Average.js import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중..."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = us..
-
React - reselect 사용하기React/라이브러리 2020. 8. 31. 23:37
들어가기에 앞서, 우선 Selector를 먼저 알아야 한다. Selector는 무엇인가? selector는 state에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말한다. 왜 써야 하는가? 다음 예제를 살펴보자. todoApp 리듀서와 getIncompleteTodos selector가 존재한다. // Reducer function todoApp(state = [], action) { switch (action.type) { case GET_ALL_TODOS: return { todos: action.data.todos }; default: return state; } } // Selector function getIncompleteTodos(state) { r..
-
Redux Toolkit이란?Redux 2020. 8. 23. 16:02
Redux Toolkit의 등장 배경 Redux가 처음 등장했을 때 많은 사람들은 우리의 애플리케이션의 모든 상태 관리 문제가 해결될 것이라고 기대했었다. 하지만 많은 개발자들이 Redux 사용에 대해 몇 가지 불편함을 느꼈다. 사용했을 때 불편했던 이유는 Redux 스토어를 구성하는 것은 너무 복잡하며, Redux를 더 유용하게 쓸려면 많은 패키지들을 추가해야 하며, 불필요한 상용구 코드량이 많다는 것이다. 이러한 Redux의 한계를 깨닫고 "효율적인 Redux 개발을위한 공식적이고 독단적인 배터리 포함 도구 세트" Redux Toolkit (RTK)가 개발되었다. 그렇다면 Redux Toolkit를 어떻게 사용하는가? 설치 방법 createAction createAction은 액션 생성자 함수를 반환..
-
미들웨어(Middleware)란?Redux 2020. 8. 22. 00:21
미들웨어(Middleware)란? 액션(action)과 리듀서(reducer) 함수 사이의 중간자라고 하며, 미들웨어를 통해 전달받은 액션을 콘솔에 기록하거나 취소 혹은 다른 종류의 액션을 추가적으로 디스패치(dispatch)할 수 있다. 단, 미들웨어를 설정하지 않는다면 액션은 바로 리듀서에게 보내진다. 리덕스(Redux)에서의 미들웨어는? 리덕스에서 미들웨어는 액션을 디스 패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다. 리덕스 미들웨어의 구조 // 미들웨어 기본 구조 const loggerMiddleware = store => next => action => { // 하고자 하는 작업 }; 위 코드는 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어..
-
React - Virtual DOMReact/기본 2020. 7. 20. 00:25
Virtual DOM이란 무엇인가? 우선 Virtual DOM은 이름 그대로 가상의 DOM을 의미한다. 리액트의 주요 특징 중 하나이며, DOM을 빈번히 업데이트하는 것을 좀 더 효율적인 방법으로 업데이트하기 위해 만들어졌다. 그렇다면 DOM은 무엇인가? DOM은 Document Object Model의 약어이다. 웹 페이지가 화면에 로딩되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다. 이 DOM을 더 간단히 설명하자면, 애플리케이션의 UI를 나타내며, HTML 파일의 JavaScript 표현을 말한다. 애플리케이션 UI 상태가 변경 될 때마다 DOM은 트리 형태이기 때문에 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입도 가능하다. 왜 DOM에 바로 접근하는 대신 Virtual D..
-
React - 초기 렌더링과 리렌더링React/기본 2020. 7. 18. 16:31
렌더링이란? 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까?? 이것의 해답은 바로 초기 렌더링과 리렌더링에 있다. 초기 렌더링 리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다. 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. render() 특징 render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다. 또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되..
-
React - SPA란?React/SPA 2020. 6. 27. 23:46
SPA란? Single Page Application(싱글 페이지 애플리케이션)의 약어이다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 말한다. SPA가 생긴 이유는? 예전에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었다. 즉, 사용자에게 보이는 화면은 서버 측에서 준비했었다는 의미이며, 이것을 CSR(클라이언트 사이드 렌더링)이라 한다. But, 요즘은 웹에서 제공되는 정보가 너무 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상 문제가 발생할 수 있다. 예를 들면, 트래픽이 너무 많이 나올 수 있다. 사용자가 몰려 서버에 높은 부하가 쉽게 걸릴 수 ..
-
React - class 컴포넌트React/기본 2020. 6. 22. 20:00
예전의 React에서는 class component가 중요한 역할을 맡았었다. 그러나 React 16.8.0 업데이트 이후에 Hooks이 추가가 된 이후에 함수형 컴포넌트에서도 LifeCycle API와 state 기능을 구현할 수 있어 이제는 잘 사용하지 않는다. 하지만, class형 component를 써야 하는 상황이 올 수 있기 때문에 정리가 필요하다. 1. import React, { Component } from "react"; - react 라이브러리에서 함수 또는 클래스를 import(확장)한다. - improt 문법은 JavaScript(ES6) 문법 중 하나로 export 된 다른 파일의 함수 또는 클래스를 불러와 사용할 수 있도록 하는 기능이다. 2. class ClassCompone..