Muscardinus

useSelector는 Redux의 상태값 조회를 위해서 사용하였던 기존의 connect를 좀 더 간결하게 사용하기 위해서 나왔다. 훨씬 간결하며 가독성을 상승시킨다. 하지만, useSelector를 무분별하게 사용할 경우, 과도한 rendering 유발해서 성능 이슈가 생길 위험이 있다. (저 같은 경우, 거래소를 만드는 과정에서, 무분별한 redux 사용 및 rendering 최적화를 고려하지 않아서, React에 많은 부담을 준 경험이 있습니다) 예를 들어보자 const { count, prevCount } = useSelector((state: RootState) => ({ count : state.countReducer.count, prevCount: state.countReducer.prevC..

기존의 flex 보다 조금 더 유연하고 편리하게 Element를 구성하기 위해서 Grid가 나왔다. Column & Row column은 '열'을 의미하고 row는 '행'을 의미한다. 하지만, 혼란을 없애기 위해서 앞으로는 column은 세로, row는 가로라고 이해를 하자. Template 가로 세로 구획을 나눌 때 부모요소에 우리는 template을 사용할 수 있다. grid-template-column -> 세로를 몇 개로 나눌지 결정 grid-template-row -> 가로를 몇 개로 나눌지 결정 각가을 나눌때는 auto 혹은 단위(fr: Fraction)을 사용한다. .parentNormal { display: grid; grid-template-columns: auto auto; grid-t..

더 많은 고객의 유입을 위해서는 Optimization은 어떻게 보면 필수적인 요소이다. 아래의 항목들은 주요 성능 최적화를 본 개발자의 기본 체크리스트이다. 상황에 따라서 더 추가하거나 제외할 수 있다. 1. Measure component level rendering performance with either of the following Chrome DevTools Performance Panel React DevTools Profiler 2. Minimize unnecessary component Re-Renders Override ShouldComponentUpdate where applicable Use PureComponent for class components Use React.memo ..

import React, { useEffect } from 'react'; import useLocalStorage from './useLocalStorage'; export default function Test() { const [name, setName] = useLocalStorage('name', ''); return ( setName(e.target.value)} /> ); } import { useState, useEffect } from 'react'; const getSavedValue = (key: string, initialValue: string) => { const savedValue = JSON.parse(localStorage.getItem(key) as string); if ..

보통 Class 형에서 함수형으로 전환되면서 혼동하는 내용 중 하나가 useState의 초기값이다. const [state, setState] = useState(초기값); 보통 우리는 위와 같이 초기값을 useState 안에 넣는다. 하지만 이러한 경우에 초기값에 복잡한 연산을 거친 값을 넣게 되면 문제가 생긴다. const [state, setState] = useState(complicatedFunction()); 위와 같이 선언될 경우, complicatedFunction이라는 함수는 매 rendering 마다 계속 호출되어서 성능적으로 문제가 생길 수 있다. 이를 보완하기 위해서 우리는 아래와 같이 작성할 수 있다. const [state, setState] = useState(() => com..

React의 state 상태를 변경하기 위해서는 setState를 사용해야한다. setState의 경우 비동기 적으로 행동한다. 비동기 함수의 경우 Browser에서 Web API로 동작하여 실행시킨 뒤 콜백을 Event Queue에 등록시킨다. 그 이후 Call Stack이 비게되면 이때 Event Queue에서 Call Stack으로 밀어주게 된다. 이를 EventLoop라고 부른다. this.setState({myCabinet: "beer"}); console.log(this.stae.myCabinet); 위 코드를 실행시키면 알 수 있지만, console에서는 myCabinet이 "beer"로 안 바껴있음을 알 수 있다. beer를 얻기 위해서는 setState의 두 번째 인자에 callback ..

Single Threaded Language JS는 Single Threaded 언어이다. 이것이 무엇을 뜻하냐면, 한번에 한 가지 일 밖에 못 한다고 생각하면된다. 하나의 Call Stack만이 존재하고 그러기에 Synchronous Language라고 부른다. Synchronous 그렇다면 Single Threaded Language이면 어떠한 단점이 있을까? 예를 들어보자, 만약 우리가 웹페이지를 방문하였는데, Alert 창이 띄워지는 상황이 있다고 생각해보자. 우리는 그 Alert의 OK 버튼을 누르기 전 까지는 다른 어떠한 작업도 할 수 없다. 만약, 모든 것이 Alert 처럼 자신의 행동이 끝나기 전 까지는, 다른 행동을 못하게 막아놓는다면 이용에 상당한 불편함이 있을 것 이다. 이러한 것을 ..

Closure는 함수로 하여금 자신의 Scope을 감싸고 있는 함수의 변수에 접근을 할 수 있게 돕는다. JS 엔진에서는 Call Stack 밖으로 나가고 나서도 Garbage Collection으로 이 변수들을 없애지 않고 남겨두기 때문에 가능한 것 이다. function a() { let grandpa = "grandpa"; return function b() { let father = "father"; let random = 12345; // not referenced, will get garbage collected return function c() { let son = "son"; return `closure inherited all the scopes: ${grandpa} > ${father..