뚜벅

리액트 리렌더링 1. props, state 변경 시 리렌더링 2. 부모컴포넌트 리렌더링시 자식 컴포넌트 리렌더링 리액트에서는 위의 조건일때 리렌더링이 발생하는데 이것을 최적화하는 방법을 정리합니다. React.memo React.memo 는 고차 컴포넌트 (HOC) 로 함수 & 클래스 컴포넌트에서 사용가능합니다. React.memo을 통해 최적화를 할 경우 렌더링에 될 때 props를 체크하여 이전 props에서 변화가 있다면 렌더링을 하고 변화가 없다면 기존에 렌더링된 결과를 재사용합니다. React.memo는 오직 props의 변화에만 의존하는 최적화 방법! 그렇기 때문에 useState, useReducer, useContext를 통해 state가 변경되면 리렌더링이 발생합니다. funtion A..

리액트 가상돔 - React Virtual DOM DOM DOM이란 Document Object Model의 약자이며, 웹페이지에 들어가는 element 요소들을 tree 형태의 자료구조로 표현한 것입니다. 그리고 각 element에는 DOM API가 있어서 DOM을 조작할 수 있습니다. 하지만 이때 리플로우 리페인트가 발생하여 시간이 걸리게 되는데요 이것을 리액트에서는 가상돔을 사용하여 효율적으로 관리합니다. Virtual DOM 가상돔은 실제 DOM의 복사본으로 자바스크립트의 객체 형태로 메모리에 저장됩니다. 이것들은 DOM의 복사본으로써 모든 element , 속성들을 가지고 있지만 브라우저에 직접 접근하여 DOM을 조작하는 것은 불가능합니다. (DOM API를 제공하지 않기 때문에) 리액트는 2개..

이번 팀 프로젝트에서 redux을 사용할 일이 있어 공부도 할 겸 정리해봅니다! 우선 redux를 사용하기 위해 알아야 할 4가지 개념을 간단하게 정리해보면 1. redux 복잡한 상태를 관리하는데 도움이 되는 상태 관리 도구이며 예측이 가능하다. 중앙 데이터 저장소 (CDN)를 통해 전체 데이터 저장소를 한 곳에서 관리할 수 있다. 2. reducers 상태를 관리하고 새롭게 업데이트된 상태를 반환해준다. 3. actions actions는 type, payload 두 가지 속성을 가지며 type는 고유 식별자 payload는 디스패치에 대한 데이터가 포함되어 있다. 4. dispatch 데이터 업데이트 actions를 보내는 데 사용된다. Redux 사용 1. react에서 redux를 사용하기 위해..

최근 프로젝트를 마무리하고 Netlify로 배포를 했습니다. 그 과정 중에 있던 에러 해결 과정을 글로 남깁니다.!! Netlify를 선택한 이유는 배포하는 과정이 쉽고, 무료인 점 그리고 깃허브에 연동후 배포 한경우 push 가 있을 때 자동으로 재 빌드를 해주는 점 때문에 Netlify를 선택하여 배포하였습니다. 하지만 배포 과정 중 에러가 많이 나왔고 특히 "build.command" failed 부분에서 시간을 많이 낭비했습니다. 다른 블로그와 Netlify 커뮤니티를 검색해서 찾아본 결과 1. package.json의 scripts에 build에서 "CI = react-scripts build" 실패!, 터미널에서 실행 안됨 2. package.json에서 배포한 주소를 homepage에 입력 ..

이번에 프로젝트를 진행하면서 글 작성 markdown이 필요했습니다. 그래서 찾아본 결과 toast ui editor이 문서화도 잘되어 있고, 커스텀을 할수 있는 점, 디자인이 예쁜 점을 고려해서 toast ui editor 라이브러리를 사용하게 되었습니다. 하지만 아래와 같이 설치하니깐 버전에러가 발생했습니다. 자세히 살펴보면 toast-ui-editor라이브러리가 리액트 17.0.1까지 지원한다고 되어 있습니다. 그래서 터미널에 다음과 같이 입력 해줍니다. npm install react@^17.0.1 react-dom@17.0.1 하지만 버전을 다운 그레이드 하면 또 다른 에러가 발생합니다. 리액트 버전 18에서는 위와 같이 ReactDOM을 import 하지만 버전 17에서는 client를 제거해..

리액트 프로젝트 진행 중 select 태그를 사용하던 중 생긴 경고입니다. 서울특별시 부산광역시 대구광역시 경고 내용은! 위의 코드처럼 option 안에서 selected를 사용하지 말고, 대신 select태그 안에서 defaultValue 또는 value를 사용하라고 말해 줍니다. 리액트 공식 문서에는 value를 사용하라고 나와 있습니다. https://reactjs.org/docs/forms.html#the-select-tag Forms – React A JavaScript library for building user interfaces reactjs.org 대신 value만 사용하게 될 경우 아래와 같은 경고문을 받습니다. Warning: You provided a `value` prop to ..