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

React 성능을 측정할 수 있는 Profiler라는 도구가 있다. 사용하기 위해선 크롬에서는 React Developer Tools라는 익스텐션을 설치해야 한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com 설치하고 React 프로젝트를 실행해서 개발자 도구를 들어가면 다음과 같이 Profiler가 있다. Pro..

React 하면 많은 것이 떠오르겠지만 컴포넌트, 재사용성 등의 키워드가 가장 먼저 떠오른다. 리액트에서는 props를 통해서 컴포넌트에 새로운 엘리먼트나 컴포넌트를 추가하는 것이 가능하다. 이것을 컴포넌트 합성이라고 부른다. 그러면 내부의 디자인이 다른 UI에서도 쉽게 재사용할 수 있는 컴포넌트를 만들 수 있다. 다음과 같은 디자인이 있다고 생각해보자 노란색 박스 영역이 조금 형식이 다른데, 위에는 보라색 버튼과, 녹색 내용이 있으며, 아래는 버튼은 없고, 갈색 내용이 있다. 이것을 위해서 모든 내용을 매개변수로 받기에는 노란색 박스가 관리해야할 매개변수가 너무 많아진다. ( 위 레이아웃까지야 괜찮다고 하더라도 더 큰 형식이면?! ) 이걸 이제 React로 한번 만들어보자 interface Props ..

지금까지 리액트 환경을 구성하는 부분은 많이 작성했기 때문에 리액트 환경 구성을 모두 다 했다는 조건으로 글을 작성합니다. 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 ..

들어가며. 이 글은 최대한 Redux의 공식 홈페이지를 토대로 Redux를 정리 및 이해하려고 한다. 동기. 자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미 실제로 프론트엔드를 개발하다보면 생각보다 많은 곳에서 State를 사용해야한다. 예를들어, 작은 모달창을 화면에 나오게 하기 위해서도 isModal 과 같은 상태를 만들어준다. 항상 변하는 상태를 관리하기란 어렵습니다... 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다. 그렇다. 부모 컴포넌트에서 자..

Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. Redux의 주요 개념들 1. Action ( 액션 ) 상태가 변화가 필요할 때, 액션이 발생된다. { type: 'TOGGLE_MODAL', data: { // ... } } 객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 2. Action Creator ( 액션 생성 함수 ) 액션 객체를 만들어주는 함수이다. export const toggleModal = (data) => { return { type: "TOGGLE_MODAL", data, } } 액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌..

state와 reducer 만들 때 타입 지정 import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 초기값 = { count: 0 }; function reducer(state = 초기값, action) { if (action.type === '증가') { return { count : state.count + 1 } } else if (action.type === '감소'){ return { count : state.count - 1 } } else { return initialState } } const store = createStore(reducer); ReactDOM.render( , document...

1. React에 TypeScript 추가하기 신규 프로젝트 npx create-react-app 프로젝트명 --template typescript 프로젝트를 만들 때 TypeScript를 자동으로 세팅해주는 명령어이다. 기존 create-react-app에 --template typescript 만 추가된 명령어다. 기존 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 패키지를 다운받고 js 파일을 ts, jsx 파일을 tsx 파일로 변경하고 프로젝트를 진행하면 된다. 하지만 파일을 변경하고 수정하는 작업이 오래걸려서 가능하면 신규 프로젝트를 만드는 방식이 안전하다. 2. React에서 사용하..