Muscardinus

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

더 많은 고객의 유입을 위해서는 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 ..

Props 단어 듯 그대로 컴포넌트의 속성값이다 props는 부모 Component로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 Component로부터 자식 컴포넌트에게 state의 상태 값, event handler를 넘겨줄 수 있다 state와 마찬가지로 Component의 props는 객체이다 Props를 통한 event handler 전달 // Parent.js class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' } } handleColor = () => { this.setState({ color: 'blue' }) } render() { return ( Paren..

State state는 말 그대로 상태를 뜻 한다. Component 내부에서 가지고 있는 Component의 상태값이다 state는 화면에 보여줄 Component의 상태를 지니고 있는 객체이다 state는 Component 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다 State 객체 Class Component state import React from 'react'; class State extends React.Component { constructor() { super(); this.state = { color: 'red' }; } render() { return ( Class Component | State ); } } export default State; state를 ..

Why Router? SPA (Single Page Application) SPA는 Page가 한 개인 Application이다 한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법을 위해서 Router를 사용한다 Routing Routing이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것 이다 React 자체에는 이러한 기능이 내장되어 있지 않다 ----> React가 framework이 아닌 Library인 이유 중 하나 React-router는 React의 라우팅 기능을 위해 가장 많이 사용되는 Library이다 React Router Example Routes.component.jsx import React from 'react'; import { BrowserRo..