react
Concurrent Feature (`React.lazy()`, `Suspense`)
코드 분할 (Code Spliting)번들 분할 혹은 줄이는 법React에서의 코드 분할Static ImportDynamic ImportReact.lazy()React.SuspenseReact.lazy와 Suspense의 적용React는 현재도 계속 업데이트가 되고 있는 오픈소스 라이브러리이며, 다양한 기능을 추가적으로 지원하고 있다. Hooks 역시 함수형 컴포넌트를 지원하면서 클래스형 컴포넌트에서 사용 가능했던 기능을 추가한 사례라 볼 수 있다. // React 18 버전부터는 경고문을 출력하는 기존 방식 const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); // React 18 버전부터는 createR..
Virtual DOM
Virtual DOM탄생 배경Real DOM (DOM)Virtual DOM의 기본 개념Virtual DOM이 Real DOM보다 빠른 이유Virtual DOM의 형태React Diffing AlgorithmReact가 DOM 트리를 탐색하는 방법다른 타입의 DOM 엘리먼트인 경우같은 타입의 DOM 엘리먼트인 경우자식 엘리먼트의 재귀적 처리키(key)Virtual DOMReact에는 Virtual DOM이라는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근해 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.탄생 배경Real DOM (DOM)Real DOM은 우리가 알고 있는 DOM과 같은 것으로, Vi..
React Hooks
Hook이란?Hook 사용 규칙useMemoMemoization예제를 통해 살펴보기useCallbackuseCallback과 참조 동등성Custom HooksCustom Hook 사용 예제 : useFetch, useInputHook이란?React의 공식문서에서는 Hook을 아래와 같이 설명한다.Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 class가 아닌 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않..
Custom Component (Styled Components, Storybook)
Component Driven Development (CDD)Styled ComponentsStyled Components 설치Styled Components 문법컴포넌트 만들기컴포넌트 재활용Props 활용Props로 조건부 렌더링하기Props 값으로 렌더링하기전역 스타일 설정StorybookStorybook 설치Storybook 기본 사용법Component Driven Development (CDD)Component Driven Development는 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 부품단위로 만들어 나가는 개발방법을 의미한다. 페이지 전체에 적용될 수 있는 작은 요소들(버튼, 토글, 모달 등)을 사전에 먼저 컴포넌트화 하여 해당 요소가 필요할 때 재사용하고, 이런 컴포넌트..
useRef
DOM reference를 활용할 수 있는 useRef예제 1 : focus예제 2 : media playbackDOM reference를 활용할 수 있는 useRefReact만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있어 DOM 지식이 필요없다고 생각할 수 있지만, React로 모든 개발 요구 사항을 충족할 수는 없다. 아래처럼 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다.focustext selectionmedia playback애니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리 활용React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. 아래의 예시코드를 보자.const 주소값을_..