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 파일을..

1. DOM DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 2. Virtual DOM이 나온 이유 만약 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 1. 메모리 누수와 속도 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 각 단계마다 페이지의 모든 document를 훑으며 ..

1. Hooks? Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함 Class 컴포넌트의 단점으론 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 패턴을 사용해서 해결해야 했다. 그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 2. 복잡한 컴포넌트들은 이해하기 어렵다. 데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가 있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 그것으로 인해서 버..

1. JavaScript와 React의 리 랜더링 바닐라 JS에서는 변경이 일어나면 전체 Element를 다시 랜더링 시킵니다. 하지만 React에서는 변경이 일어나는 부분만 다시 랜더링 시킨다. 2. React의 랜더링 React 앨리 먼트는 불변 객체 (immutable)이다. React에게 변경하고 싶은 내용을 전달하기만 할 뿐이고, 실제 변경에 대한 판단, 반영은 React가 알아서 한다. 변경되는 방법으론 1. 앨리 먼트 타입이 바뀌면? => 이전 앨리 먼트는 버리고 새로그린다. 2. 앨리먼트 타입이 같다면? => (key를 먼저 비교하교), props를 비교해서 변경사항을 반영한다. ※ 불변 객체? 말 그대로 변하지 않는 객체이다.

1. JSX 문자도 HTML도 아닌 JavaScript의 확장 문법 const text = "Hello, world!"; const textClass = "title" const element = {text} React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다. 2. Babel JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. const text = "Hello, world!"; const textClass = "title" const element = {text} = // 바벨처리 => const text = "Hello, world!"; const textClass = "title"; const elem..

1. DOM? Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다. 위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다. 2. Element html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다. 이것을 React에서 어떤 방식으로 사용할까? 3. React에서의 Element 다루기 보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다.

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신한다. 이 경우 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 요청이 끝나야 비로소 다음 예정된 작업을 할 수 있다. 하지만 비동기적으로 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 ..