Reconcilation? React를 사용할 때, `render() 함수는 React 엘리먼트 트리를 만드는 것이다.' 라고 생각할 수 있다. state나 props가 갱신되면 render() 함수는 새로운 React 엘리먼트 트리를 반환한다. 이때 React가 가장 효과적으로 UI를 갱신해서 트리를 만드는지 알아보자! 여기서 사용된 것이 Reconciliation (재조정) 알고리즘이다. 하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있다. 하지만 이런 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n3)의 복잡도를 가진다. 1000개의 엘리먼트를 그리기 위해서 10억 번의 비교 연산을 수행해야 한다는 뜻이다. 그래서 Re..

우리가 문제 해결 시에 사용하는 동적 계획법(DP) 또는 분할 정복과 같은 완전 탐색에 기초한 디자인 패러다임은 실생활에서 사용하기 매우 한정적이다. 예를들어, 인공지능 체스 프로그램을 브루트 포스 방식으로 짠다면 이동 가능한 모든 말의 움직임을 다 확인한다. 하지만 이 방법으로 개발한다면 말과 이동할 수 있는 칸이 너무 많기 때문에, 게임이 끝나지 않는다고 한다. (경우의 수가 10^120 가지) 결국 모든 경우의 수를 확인하지 않고도 답을 찾아낼 수 있는 방식을 사용해야 한다. 휴리스틱 알고리즘이란? 불충분한 시간이나 정보로 인해 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않을 경우 보다 빠르게 사용할 수 있는 추론의 방법이다. 기본적으로 가능성이 없는 답들을 탐색하는..

1. PropTypes ? Props의 타입을 확인하기 위한 도구이다. 애플리케이션 개발을 진행하다가 점차 규모가 커지면서 타입 확인을 통해서 버그를 잡을 경우가 있다. Flow 또는 TypeScript 같은 JavaScription 도구를 사용할 수 있지만 React에 내장된 타입 확인 기능이 PropTypes이다. 성능상의 이유로 개발 모드에서만 확인할 수 있다. 2. 사용하기 하나의 자식만 요구하기 import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { // 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다. const children = this.prop..

1. Render Props 재사용의 한 방법이다. ( Composition, HOC, render props ... ) React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 기능이다. 2. 사용 이유 class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( M..

1. Portals? DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이다. 일반적으로 컴포넌트를 렌더링 메서드에서 엘리먼트를 반환할 때 부모 노드에서 가장 가까운 자식으로 DOM이 마운트 된다. 그런데 가끔 DOM의 다른 위치에서 자식을 삽입하는 것이 유용할 수 있다. 예를 들어, overflow: hidden이나 z-index가 있는 경우 시각적으로 자식을 "튀어나오도록" 보여야 하는 경우가 있다. 다이얼로그, 툴팁 같은 것 말이다. 2. 필요성 import React, { useState } from "react"; export default function Portals(props) { const [isOpen, setIsOpen] = useState(false); re..

0. 들어가며 처음 React를 공부할때, 보통 CRA(create react app)을 사용해서 프로젝트를 만들지만 Webpack과 Babel을 공부하는 겸 한번 빈 페이지에서 프로젝트를 만들어보겠다. 1. 세팅 및 패키지 설치 npm init npm init 명령어를 통해서 package.json을 만들어주자! npm i --s react react-dom React 프로젝트를 만들 것이기 때문에 당연히 react와 react-dom을 설치한다. npm i -D --s webpack webpack-cli webpack-dev-server - webpack : webpack을 사용해서 프로젝트를 만들기 때문에 당연히 설치한다. - webpack-cli : 커맨드 라인에서 webpack을 사용할 수 있게..

1. Memoization ? Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 2. React의 Memoization ? 1. memo 동일한 props로 렌더링을 한다면, React.memo를 사용하면 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고, 마지막으로 렌더링된 결과를 재사용한다. import React, { useState, useEffect } from "react"; import MemoItem from "./MemoItem"; const commentList = [ { title: "comment1", con..

0. 들어가면서 웹사이트를 만들다 보면 필연적으로 만나는 기능 중 하나인 Slide! 요즘은 워낙 고수분들이 가공하여 배포를 해줘서 npm에서 검색을 하면 웬만한 기능은 사용이 가능하다. 그런데 react-slick이라는 좋은 Slide가 사용에 대해서 조금 불편한 점이 있어 그 부분 정리하는 김에 같이 정리하였다. 물론 내가 Document를 못 찾는 걸 수 있다.... 1. 공통 react-slick은 기본적으로 태그 안에서 슬라이드 별 필요한 옵션을 넣어 사용한다. 또 본문에 SlideContainer, SlidePage 같은 태그가 있을 건데, 그건 styled-component를 사용해서 기본적인 디자인을 넣었다. 추가로 기본적으로 제공하는 css 스타일을 적용하기 위해서 두 가지 css 파일을..