본문 바로가기

전체 글291

redux 기초(data, modifier, action) redux를 처음 접하면 굉장히 어려운 느낌이 든다. 구조가 전체적으로 이해가 안 가기 때문이다. 간단한 핵심 위주로 설명하고자 한다. 우선 redux를 쓰는 이유는 데이터를 관리하기 위함이다. 데이터를 관리하는 공간을 먼저 만드는 것이 시작이다. const countModifier = (state = 0) => { return state;}; const countStore = createStore(countModifier); data를 관리하는 곳이 만들어졌다. createStore로 저장공간을 만들어야 하고 데이터를 리턴하는 함수인 modifier가 인자로 들어간다. countModifier의 리턴 값은 0이다. 1. 데이터를 리턴하는 2. 함수 1,2 를 만족하는 것이 redux에서 흔히 부르는 r.. 2021. 3. 10.
리액트 컴포넌트 내에서 반복적으로 계산되는 값 최적화하는 법 그래프을 렌더링하는 컴포넌트에서 그래프를 위한 데이터 상태를 갖는데 이를 필터링 한 값을 계산하여 사용한다고 해보자. 그래프 데이터가 100만개 있고 graphData([1,2,3,4,5,6, ... , 1000000]) 이 있다고 하고 짝수번 째 인덱스 값들을 사용하여 계산한 값을 evenValue에 저장하여 사용한다고 해보자. const evenValue = graphData[0]**2+graphData[2]**2...graphData[1000000]**2 라는 표현식이 있을 것이다. 별도의 작업 없이 코드로 타이핑 되어 있다면 컴포넌트에서 렌더링 될 때마다 이 연산이 렌더링 될 때마다 다시 계산될 것이고 그 비용은 굉장히 클 것이다. 따라서 리스트의 값이 변경이 되지 않았다면 재사용이 되는 것이 .. 2021. 3. 2.
redux를 쉽게 사용하기(reduxjs/toolkit) vuex를 사용해보았다면 알겠지만 vuex에 비해 redux는 복잡하고 작성해야할 코드들이 많아 보인다. 조금 더 직관적으로 사용할 수 있는 것이 reduxjs/toolkit이다. 기존에 action, reducer를 나누어서 정의하던 것을 한 번에 작성할 수 있다. 다음 코드를 보면 couter라는 곳에서 value라는 state를 관리하고 있는 것을 한 눈에 알 수 있다. 그리고 increment, decrement를 통해 +1, -1을 하는 것도 바로 파악 가능하다. 컴포넌트에서는 dispatch(increment()) 와 같이 사용하면 끝이다. // counterSlice.js import { createSlice } from '@reduxjs/toolkit'; export const slice .. 2021. 2. 24.
리액트를 다루는 기술 absolute path 사용법 .env에 NODE_PATH=src를 넣고 sass-loader 설정 부분에 includePaths: [paths.globalStyles]를 넣는 작업 등을 하는데 현재 create-react-app에서는 사용이 안되는 것으로 보인다. ..../src/components/App.js 에서 다음 파일( ..../src/styles/app.scss )을 절대 경로로 import 하는 법은 다음과 같다. package.json이 있는 경로에 jsconfig.json을 만들고 입력한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그 후 App.js 에서 다음처럼 입력한다. import "styles/app.scss"; 그럼 절대경로로 불러온.. 2021. 2. 16.

티스토리툴바