앞서 useState와 useRef에 대해서 정리를 했었다. [React] useRef 그리고 useState 일반적으로 우리가 상태값을 관리할 때는 useState를 사용한다. 거기에서 state 값이 변경되면 리렌더링이 발생하면서 화면이 새롭게 그려진다. 그런데, 상태값이 변경되더라도 굳이 리렌더링이 필 bum-developer.tistory.com 해당 부분에 대한 보충 내용이지만 좀 더 개념적인 부분이라 따로 작성했다. 제어 컴포넌트 React에 의해서 값이 제어되는 컴포넌트를 말한다. 우리가 자주 사용하는 useState를 사용해서 DOM 요소의 값을 관리하면 제어 컴포넌트이다. const App = () => [ const [value, setValue] = useState(""); const..

최근 성능 최적화에 대해서 공부하던 중 " useMemo와 useRef의 차이가 뭘까? " 에 대해서 궁금증이 생겼다. 둘을 비교하려면 우선 각각 뭔지에 대해서 짧게 알아보자! useMemo 란? React는 DOM에 변화가 있을 때마다 렌더링을 하는데, 현재 컴포넌트가 리렌더링 되더라도 값의 변화가 없는 경우에 똑같이 리렌더링을 한다면 쓸대없이 자원을 낭비하게 된다. 그래서 변화가 생겼을 때, 현재 함수에 유의미한 변화를 발생시키는 경우에만 연산을 다시 수행하게 해주는 것이 useMemo이다. 즉, 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 Hook이다. const result = useMemo(countingCallback, [deps]); deps 배열에 들어있는 상태가 변경될 때만 연산을 다..

시나리오 React Memo를 사용할 때 같이 이야기가 나오는 친구가 바로 useCallback이다 그래서 useCallback을 사용할 때와 사용하지 않은 함수를 비교한다. 머리론, useCallback이 의미없이 사용되면 일반 함수보다 시간이 더 오래 걸릴 거라는 생각이 들었다. 작업 import React, { useState } from "react"; import { useCallback } from "react"; import styled from "styled-components"; const ChildComponentOne = ({ photos }) => { console.log("ChildComponentOne Render"); const handleClick1 = useCallback(..

지금까지 리액트 환경을 구성하는 부분은 많이 작성했기 때문에 리액트 환경 구성을 모두 다 했다는 조건으로 글을 작성합니다. Canvas 만들기 //GlobalStyle.tsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; } `; export default GlobalStyle; 우선 거슬리는 body의 margin을 styled-components의 createGlobalStyle을 사용해서 없애준다. import GlobalStyle from './GlobalStyle'; import Home from './pages/Home'; interface ..

React를 사용하다보면 자연스럽게 마주하는 부분이 상태 관리일 것이다. Hooks를 사용하는 useState만으로는 프로젝트의 크기가 커진다면 불편함을 느낄 것이고, 그러면 자연스럽게 전역 상태 관리에 눈이 가게 될 것이다. React는 Redux, MobX, Recoil 과 같은 전역 상태 관리가 있다. 그런데 어느날 React Query 라는 것을 알게 되었는데, 이것도 상태 관리를 도와주는 라이브러리라고 한다. hmm... 솔직히 들어보지 못했다. 이런 것이 있는줄은.... 그래서 한번 찾아보니 일반적으로 상태 관리는 Client의 상태와 Server의 상태가 있다. 그동안의 나는 당연하다듯이 Redux를 사용해서 두가지 상태를 모두 관리하게 되었다. Redux를 사용해서 서버와 통신을 하기 위해..

0. 들어가며, Redux에 대해서 몇가지 공부를 했었다. 이번에는 타입스크립트와 함께 사용해볼 계획이다. [React] Redux - 기본편 [React] Redux - toolkit편 [React] Reduxt - toolkit 사용해보기편 기본적인 타입스크립트 세팅은 끝났다고 생각하고, Redux를 사용하는 부분만 작성할 예정이다. 세팅하기 yarn add @reduxjs/toolkit react-redux 리액트에서 리덕스를 사용하기 위해서 필요한 패키지를 먼저 설치한다. @types/react-redux 타입스크립트를 위해서 해당 패키지가 필요하지 않은가 생각할 수 있지만 react-redux 7.2.3버전부터 해당 패키지를 포함하고 있기 때문에 이후 버전은 설치할 필요가 없다. - src --..

react에서 뒤로가기 버튼을 감지하는 작업을 해야할 때가 있다. 과연 어떤 방법을 사용해야 할까? 세팅 본인은 react-router-dom v6 을 사용하고 있다. v6에는 history를 제공해주는 useHistory가 사라져서 따로 패키지를 받아야 한다. yarn add history 작업 시작 // common/history.ts import { createBrowserHistory } from "history"; const history = createBrowserHistory(); export default history; 필요할 때마다 createBrowserHistory를 사용해서 history를 만들어도 되지만 그렇게되면 두번 일을 한다는 느낌이 있어서 따로 만들었다. history는 ..

Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s..