CRA를 사용하지 않으려는 이유CRA(Create-React-App)을 사용하면 빠르게 React 프로젝트를 설정할 수 있다. npm create-react-app my-app 명령어 한줄로 프로젝트에 필요한 기본 패키지가 모두 설치되고 설정 파일이 모두 자동으로 생성되고 기초 파일까지 생성된다. 이렇게 편한 사용법을 이유로 지금까지 진행했던 프로젝트에서 많이 사용했다. 하지만 분명 편리한 방법이지만 한계점이 분명히 존재한다. 프로젝트의 방향성에 따라 프로젝트의 기존 설정을 변경해야할 때가 존재할 수 있다. CRA를 이용해 생성된 React 앱은 하나의 build 의존성을 갖고 모든 패키지와 설정 정보를 다른 곳에 보관하고 있다. 이로 인해 Webpack, Babel, Typescript 등의 ..
React
1. State란? 리액트에서 State는 컴포넌트 내부에서 지속적으로 변할 수 있는 값을 의미한다. 개발자의 의도대로 변할 수 있으며 사용자의 입력에 따라 새로운 값으로 변경할 수 있다. state가 변경되면 React가 자동으로 계산해 변경된 부분을 리렌더링 한다. props는 부모 컴포넌트로 부터 받아 자식 컴포넌트에서 변경이 불가능하고 읽기만 가능한 값이다. 2. 함수형 컴포넌트에서 useState을 사용해 state 관리하기 함수형 컴포넌트에서 state를 관리하기 위해 useState를 사용한다. import { useState } from "react"; const App = () => { const [value, setValue] = useState(""); ... } 위의 코드에서 use..
1. React 컴포넌트란? React 컴포넌트는 UI를 나타내는 독립적이고 재사용이 가능한 모듈이다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 타입이 있다. React 공식 메뉴얼에는 함수형 컴포넌트 사용을 권장하기 때문데 이 글에서는 함수형 컴포넌트를 다루겠다. 2. 함수형 컴포넌트 함수형 컴포넌트는 React에서 UI를 정의하기 위해 사용되는 함수이다. React 공식 문서에서 최신 버전의 React에서는 함수형 컴포넌트 사용을 권장한다. 함수형 컴포넌트의 장점 함수형 컴포넌트의 장점은 간결하게 작성이 가능하며 코드의 가독성이 뛰어나고, Hook을 이용해 state와 라이프 사이클을 제어할 수 있는 등 클래스 컴포넌트 처럼 동작할 수 있는 점이다. 또한 컴포넌트에서 다른 컴포넌트로 ..
1.Batching 이란? Batching이란 React가 더 나은 성능을 위해 state 업데이트를 모아서 한번의 리렌더링을 진행하는 메커니즘을 말한다. 1.1 Batching의 장점은? React에서 성능적인 장점을 갖는다. 여러개의 state가 업데이트될 때마다 발생하는 불필요한 리렌더링을 막기 때문이다. 식당에서 메뉴를 주문하면 한개씩 결제하지 않고 메뉴를 종합해 한번에 결제하듯이 Batching은 한번의 리렌더링을 한다. 1.2 그렇다면 언제나 한번에 보낼까? React 18 이전까지는 그렇지 않다. 데이터를 외부에서 가져와 특정 함수 내부에서 state를 업데이트 하거나, 비동기 혹은 Promise, native 이벤트 핸들러 등 특정 상황에서는 한번에 보내지 못하고 여러번 나누어 보내기도 한..
Diffing 알고리즘을 알려면 먼저 이 글을 읽고 VDOM에 대해 알고 와보자 React) Virtual DOM 가상 돔1. 문서 객체 모델 DOM 1.1 DOM DOM은 Document Object Model 의 약어이며, 메모리에 객체로 웹 페이지 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성한다. DOM은 프로그래밍 언어가 트리 형태인 DOM 구조58cjdcns99.tistory.com 1. Diffing 알고리즘이란?리액트 공식문서(레거시)의 한 부분을 가져와 봤다.하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있습니다. 하지만 이러한 최첨단의 알고리즘도 n개의 엘리먼트가 있는 트리에 대..
1. 문서 객체 모델 DOM 1.1 DOM DOM은 Document Object Model 의 약어이며, 메모리에 객체로 웹 페이지 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성한다. DOM은 프로그래밍 언어가 트리 형태인 DOM 구조에 접근할 수 있는 방법을 제공해 특정 노드(문서, 구조, 스타일 등)를 찾거나 수정, 제거, 원하는 곳에 삽입할 수 있다. 웹 브라우저는 DOM을 활용해 객체에 Javascript와 CSS를 적용한다. API (web or XML page) = DOM + JS (scripting language) DOM과 접근 방법에 대해 추가로 알아보기 위해 아래의 링크를 참고하자 DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문..
