✍ 공부/React

[ TIL ] React.memo() 적절하게 사용하기

0. 사용 이유 ✍ 리플로우와 리페인트 브라우저가 렌더링 된 후 모종의 이유로 레이아웃이 변경될 때 마다 브라우저는 렌더링 된 부분을 업데이트 하는 과정에서 전체 화면을 다시 렌더링하게 된다. 이 과정에서 '리플로우(Reflow)'와 '리페인트(Repaint)'가 발생하게 된다. 리플로우( Layout ) 렌더 트리의 노드들이 뷰포트 내에서 어떻게 위치되어야 하는지 정보를 계산하는 단계. 이 단계를 통해 디자인 속성을 픽셀 단위로 변환. 리페인트( Paint ) 렌더 트리에 만들어진 노드를 실제로 화면에 그리는 단계. 레이아웃에 영향을 주지 않는 스타일 속성의 변경은 reflow를 수행하지 않고 paint 과정만 수행한다. 따라서 가급적이면 리플로우가 발생하는 스타일 수정보다 리페인트가 발생하는 스타일만..

[ TIL ] React.PureComponent란

0. 이용 목적 이용 목적을 알기 위해서는 react에 존재하는 component들에 대해서 알 필요가 있다. ✍ React.Component ES6 class를 사용하여 React 컴포넌트를 정의할 때 기초가 되는 class이다. shouldComponentUpdate를 따로 설정하지 않으면 항상 true를 반환한다. => setState 실행 시 무조건적으로 컴포넌트가 업데이트된다. ✍ React.PureComponent props와 state를 이용하여 React 컴포넌트를 정의할 때 기초가 된다. shouldComponentUpdate는 props와 state의 얕은 비교(shallow compare) 을 통해 비교한 뒤 => 변경사항이 있을 시 : true => 리렌더링 => 변경사항이 없을 시..

[ React Hook Form ] react에서 form 쉽게 이용하기 (+TypeScript)

0. 이용 목적 react에서 form을 사용해 본 사람이면 알겠지만, 더욱이 form의 개수가 한 두 개가 아닌 무더기로 있어본 경험을 해본 사람이면 알겠지만 react에서 form을 만들고 input과 button을 관리하는 데는 은근히 신경 쓸 부분이 많다. input에 작성된 값을 인식하고... 보내고... preventDefault() 까지 익숙하다면 익숙한 과정이지만 더 간결한 코드를 위해 이번 프로젝트에서 이용해 보았다. react에서 form을 작성하는게 지겹다면 꼭 한번 시도해보면 좋을 것! react 뿐만 아니라 react native에서도 사용할 수 있다 1. 설치 설치 npm install react-hook-form 혹은 yarn add react-hook-form 2. 사용 방법..

React에서 styled-component 이용하기 + typescript

사용하는 이유 styled-components는 React css 스타일링 프레임워크로, CSS in JS이다 따라서 JS에서 직접적으로 스타일에 영향을 줄 수 있다. className을 따로 지정할 필요가 없다 => 빌드 시 고유한 클래스명이 적용된다. CSS 문법을 따르기 때문에 가독성에 좋다 새로운 component를 만들고 만들어둔 component를 다른 컴포넌트에 이용할 수 있어 효율적이다. 중첩 스코프 규칙을 이용해 직관적인 코드 작성이 가능하다. 일관적인 스타일 관리가 쉽다. 반복적으로 쓰이는 요소를 정의해서 props로 가져다 쓸 수 있다. 시작하기 0. 설치 npm install --save styled-components // 기본 yarn add styled-components //..

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

내가 공부하다가 궁금해서 정리해본 차이점 react는 알다시피 SPA(single page application)에 최적화 되어있다. 그 이유 중 하나가 바로 router. 1. react-router-dom을 설치해서 이용하며 2. a 태그를 이용할 때 생기는 무의미한 재랜더링을 예방 => 속도가 빠르다 router에는 우리가 익히 아는 BrowserRouter HashRouter 외에도 StaticRouter MemoryRouter NativeRouter 이 있다. 🤷‍♀️ BrowserRouter과 HashRouter의 차이는? BrowserRouter www.123123/post 1. HTML5의 history API를 이용해 UI를 업데이트 2. 동적인 페이지에 적합 3. 새로 고침 / 경로를 ..

react로 setInterval을 사용할 때 겪을 수 있는 문제들

개인 프로젝트 agenda (이제는 pilzAgenda가 되어버린) 를 진행하면서 여러 문제에 맞닥뜨리게 되었다. 그 중 하나가 시간을 나타내는 문제. 시간? 그거 그냥 api받아오던가 현재 시간 받아와서 그려주면 되는거 아닌가? 하고 안일하게 생각했던 내 자신을 반성하게 된 어제 저녁을 계기로 react에서 setInterval을 어떻게 사용해야 하는지에 대해서 글을 작성해보기로 했다. 만약 내가 바닐라 자바스크립트를 이용해서 프로젝트를 만들고 있었다면 정말로 setInterval을 이용했을지도 모른다. 일단 원하는 결과는 화면에 그려지기에. 하지만 react는 누구나 알다시피 props나 state의 변화가 없으면 재렌더링되지 않는다. 또한 너무 많은 재렌더링은 react의 효율을 떨어뜨린다 => s..

🔧[ recoil ] recoil로 react 상태관리 하기

1. 등장 배경 & 이용 목적 2. 설치 / 사용 방법 3-1 설치 3-2 RecoilRoot 3-3 Atom 3. 사용 후기 4. 정리 참고 1. 등장 배경 & 이용 목적 react의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다 즉, 부모 component에서 자식 component로 props가 옮겨오는 식의 형태를 띄고 있다. 따라서 모든 component에서 쓰여야 하는 상태(ex 유저 정보)가 있다면 이 정보를 계속 부모에서 자식으로, 또 그 자식으로 전달해야 하는 어려움이 있다. 따라서 Redux를 통해 상태관리를 시행했지만 React에 최적화되어있지 않아서 사용에 불편함이 있었다고 한다 그 때 facebook에서 react에 최적화된 상태 관리 툴이라는 이름으로 recoil을 내보이게..

🥜 [ React ] react 학습내용 나름대로 정리하기 1

드림코딩, 노마드코더, 게임으로 배우는 react 강의 수강. React란? 웹 UI를 만들 수 있는 컴포넌트로 이루어진 UI 라이브러리이다. (그러나 프레임워크에 더 가깝다) 싱글페이지 어플리케이션에 최적화되어있으며 웹앱의 느낌을 내기 때문에 사용자 경험에 좋다 특징 - component - jsx - virtual dom - 단방향 데이터 바인딩 1. component -독립적 -고립됨 -재사용가능 헤더, 푸터, 버튼, 아티클 단위로 묶어서 한 가지 기능을 전문적으로 수행하는 컴포넌트 단위로 관리할 수 있다. 따라서 특정 부분에 오류가 발생했을 시, 그 컴포넌트만 수정하는 것으로 해결할 수 있어 유지보수에 좋다. 또한 한번 사용한 컴포넌트를 다시 사용할 수 있는 재사용성이 높다. React 설치 re..