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에 대한 개념을 간략하게 소개하는 문..

React는 오직 V(View)만 신경 쓰는 라이브러이다. 1. 컴포넌트 React 프로젝트에서 특정 부분의 생김새와 재사용 가능한 기능들을 내장하며, 컴포넌트의 생김새와 작동 방식을 정의한 선언체이다. 2. 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라 한다. React는 가상DOM을 사용해 렌더링을 이루지만, 변경된 부분만 실제DOM에 적용된다. 2.1 초기 렌더링 사용자에게 맨처음 어떻게 보일지를 정하는 작업 위의 작업은 render() 함수가 한다. render() 함수는 뷰의 모습과 동작방식이 담긴 정보 객체를 반환한다. 최상위 컴포넌트가 render() 하면 자식 컴포넌트도 재귀적으로 렌더링 한다. render() 함수가 실행되고, 해당 컴포넌트의 가상 DOM이 생성되며, 변경사항이 실제..