![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bU5pK6/btrnVx8N2Yk/PQWTyKFk9QYRAc4xPwKRb1/img.png)
Smart diffing algorithm 랜더링 되어 사용되고 있는 Real DOM Tree와 React에서 쓰는 in-memory에 있는 Virtual DOM Tree를 비교하는 알고리즘이다. 최소한의 연산으로 수정작업이 요구되는 실제 DOM object를 찾아서 수정 및 변경작업을 한다. 이 알고리즘의 Time Complexity는 O(n)으로써 상당히 빠른편이다. 옛날에 포스팅한 virtual dom에 대한 내용 https://kmj24.tistory.com/124 브라우저, DOM과 Virtual DOM 브라우저는 가장 많이 사용하는 SW프로그램일 것이다. 브라우저의 종류로는 IE, Chrome, Safari, Firefox, Opera, Edge 등이 있다. 브라우저의 기능 우리는 브라우를 통..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nmnWg/btra34jZsc9/GkxZHw3ywpIWpaxBeVkOeK/img.png)
Next.js란? React에서 SSR(Server Side Rendering)을 지원해주는 framework이다. Nextjs 공식 사이트 https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org SSR이란 서버사이드렌더링의 약자로 CSR의 단점인 로딩 시간의 감소를 위한 기술이다. CSR은 클라이언트사이드렌더링이고 클라이언트 측에서 html, css, ..
Ducks: Redux Reducer Bundles Redux를 사용하여 상태관리를 구축하는 과정에서 하나의 기능을 만들 떄 각각 use case에 따라 type, action, reducer를 계속 추가해야 된다는 점과 reducer와 actions만 서로 연관된 동작을 하므로 하나의 독립된 모듈로 묶는것이 더 의미가 있고 라이브러리로 packaging하기 더 쉽다고 한다. 규칙 1. 하나의 모듈은 항상 reducer 함수를 default로 export해야 한다. 2. action 생성자를 함수로 export해야 한다. 3. action 타입은 npm-module-or-app/reducer 4. 외부 reducer가 해당 action들의 발생을 계속 기다리거나, 재사용이 가능한 라이브러리일 경우 "UP..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bbJs6N/btq74Dw0NcB/BzCq6M90nE7MPwJ2bdkDhk/img.png)
React Hooks란? React v16.8에 추가된 새로운 기능이다. 기존 함수 컴포넌트에서는 Class컴포넌트의 life cycle기능을 사용할 수 없었는데 hooks를 이용하여 가능하도록 했다. (class 컴포넌트는 hooks사용 불가능) https://kmj24.tistory.com/118 [React] Lifecycle과 useEffect hook React는 class로 컴포넌트를 생성할 수 있고, function으로 컴포넌트를 생성할 수 있다. class컴포넌트와 함수 컴포넌트의 차이는 Lifecycle method를 사용할 수 있냐 없냐가 있다. React에서 함수 컴포넌트를 kmj24.tistory.com State Hook class컴포넌트에서 state는 object 형태로 사용했..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/LMY9N/btq66VE7ogr/KMXbr8VRVDs7jIkq5Qwm5k/img.png)
Redux-Saga redux-saga는 redux의 비동기 작업을 구현할 수 있도록 도와주는 library이다. redux 공식문서에서는 다음과 같이 소개하고 있다. redux-saga is a library that aims to make application side effects easier to manage, more efficient to execute, easy to test, better at handling failures. redux-saga는 side effect(실행중인 현재 함수의 범위를 벗어난 것에 영향을 미치는 모든 것, server와의 통신과 같은 비동기 작업, 인증 서비스 호출, 브라우저 캐시 액세스 등의 작업)를 보다 쉽게 관리/실행/테스트를 할 수 있도록 도와주는 라이브..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/mCIaS/btq6ru97VqB/yeAcSD2gc9FXv1SESuW0XK/img.png)
Router란? 라우터는 컴퓨터 네트워크에서 데이터를 송수신하는 장치이다. 패킷의 위치를 추출하여 그 위치에 대한 최적의 경로(가장 빠르게 동신이 가능한 경로)를 지정하며 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 네트워크 중계 장치이다. 사실 Router는 여기서 기술할 react router와는 관련이 없다. 하지만 "경로를 설정한다"라는 기능은 동일하다. React router React router는 설정한 URL에 따라 콘텐츠를 전송해준다. react-router는 서드파티 라이브러리로써, 컴포넌트를 routing하기위해 가장 많이 사용하는 라이브러리이다. router를 직접 구현하는 것은 시간이 걸리는 작업이다. react router 라이브러리를 사용하면 이러한 작업을 간단하게 해..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ABGOD/btq1pz85zSk/LlaBFsxeSx0Mz59WvsGcqK/img.png)
리덕스 리덕스는 상태(State)를 관리 라이브러리이다. 상태(State) 란? 컴포넌트 내 mutable 데이터 저장소이다. mutable하다는 의미는 상태값을 변경할 수 있다는 것이고 뷰(render)에서 상태를 이용하고, 상태가 변경되면 뷰가 리랜더링(Rerendering)되는 성격을 가지고 있다. 화면에서 사용자의 Input값을 감지하는 상황을 예를 들어보자 위의 사진은 useState hook을 이용하여 입력받을 데이터데 대한 초기화를 해놓은 형태이다. 이 사진은 input박스의 데이터 변화를 감지하여 state에 데이터를 변경해주는 코드이다. 이런 형태로 state를 관리할 수 있다. 이러한 데이터들을 하위컴포넌트 또는 상위컴포넌트로 전달할 경우, 컴포넌트 트리가 깊어지면 상태관리가 복잡해질 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/baXL5L/btq47ThnkSV/5OUODMFal4phCJpcEZo1G0/img.png)
history.push와 Redirect차이점이 궁금해진 이유 개인 프로젝트에 HOC를 적용하며 props.history와 Redirect의 차이점이 무언지 궁금해졌다. 현재 로그인 유무에 따라 접근을 제한하기 위한 HOC를 만들고 있다. 예를 들어 로그인 페이지는 로그인 전은 접근이 가능하도록 하고 로그인 후는 로그인 페이지에 접근하려 할 경우 기본 페이지로 다시 돌아가게 작동을 하려하는 상황이다. 1. Redirect를 사용한 경우 function Authentication(props : any){ useEffect(() => { if(option){ (async () => { const request = await axios.get('/user') .then((response : AxiosRespo..