본문 바로가기

📚 Study Note/React10

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

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

Pomodoro - TS, React, Tailwind CSS 이번에 frontend mento 사이트에서 간단한 타이머를 만들어 봤습니다. 사용한 기술 스택 typescript react tailwind css headlessui react-countdown-circle-timer 구현 사항 1. 반응형 (모바일, 태블릿, pc) 2. 타이머 3. 환경 설정 모달 4. 시간, 폰트, 색깔 설정 1. 반응형 구현 tailwind css를 사용하면 반응형 디자인을 쉽게 구현할 수 있기 때문에 tailwind css를 사용했습니다. 필요한 색깔, 폰트, 사이즈 등을 tailwind.config에 세팅해 줍니다. 2. 타이머 구현 타이머 구현은 react-countdown-circle-timer 라이브러리를 사용해서 구현하였습니다. 3. 환경 설정 모달 및 홈 화면 탭바.. 2023. 1. 2.

외부 클릭 이벤트 - React 사이드 바가 열려있을 때, 외부 클릭을 하면 사이드 바를 닫아주는것을 구현하기 위해 아래와 같이 외부 클릭 시 이벤트를 주었습니다. 전체 코드 2022. 10. 5.

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

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

Toast ui editor - Failed to parse source map 라이브러리를 정상적으로 설치하고 버전 에러를 해결하니 또 다른 문제점이 발생합니다. 샐 행 하는 데는 문제점이 없지만.. 계속 보이는 게 마음에 안 들어서 수정해 봅니다. 이 같은 문제는 toast ui editor 깃 헙 이슈에도 올라와 있는데요 https://github.com/nhn/tui.editor/issues/2137 Failed to parse source map (@toast-ui/editor/dist/purify.js.map) · Issue #2137 · nhn/tui.editor Describe the bug Cant parse the source map for toast-ui/editor Compiled with warnings. Failed to parse source map fro.. 2022. 8. 30.

Toast ui editor 리액트 버전 에러 이번에 프로젝트를 진행하면서 글 작성 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를 제거해.. 2022. 8. 30.

React Router dom v6 - React Protected Routes React Router dom을 이용해서 프로젝트를 진행 중 로그인 여부에 따라 보이는 경로를 다르게 할 방법이 없을까! 고민하다 공부한 내용을 정리 해봅니다. 예를 들어 다음과 같은 경로가 있고, 1. 로그인하지 않은 유저는 "/todo" 경로로 이동할 경우 "/" 경로로 리다이렉트 한다.라는 조건이 있는 경우 아래와 같이 utils 폴더에 PrivateRoutes.jsx 파일을 생성하여 아래와 같이 작성해줍니다. Context API를 사용해서 로그인 여부를 관리해줬는데, 이때 로그인되지 않은 경우, "/" 경로로 리다이렉트 해줍니다. 그리고 로그인된 경우 Outlet를 사용해서 자식 경로 요소를 렌더링 해줍니다. 그리고 App 컴포넌트에서 Private 경로의 라우트에 생성한 PrivateRoute.. 2022. 8. 24.

이전 1 2 다음

티스토리툴바