React 자주쓰는 용어, Reconciliation, Custom Hook

많이 쓰는 용어

Vanilla JS

순수 자바스크립트를 의미함
특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트

JSX

문자도 HTML도 아닌 JavaScript의 확장 문법

const element = <h1>Hello, world!</h1>;

Babeljs.io

JavaScript Complier
컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램

스프레드 연산자

const customH1 = <h1 {...props}>{props.text}</h1>; // 스프레드 연산자
// const customH1 = <h1 className={props.className} children={props.children}>{props.text}</h1>;
ReactDOM.render(customH1, rootElement);

re-render

바닐라 JS => 변경으로 인해 Element를 다시 그림
React => Virtual DOM을 통해 변경된 부분만 업데이트 (reflow, repaint 최소화)

리액트의 렌더링

React 앨리먼트는 불변객체(immutable)입니다.
불변객체? 변하지 않는 객체
우리는 그저 ReactDOM.render(element, rootElement); 로 전달할뿐...
변경 판단 및 반영은 리액트가 알아서 한다.

재조정 (Reconciliation)(https://ko.reactjs.org/docs/reconciliation.html)

• 앨리먼트 타입이 바뀌면?
  • 이전 앨리먼트는 버리고 새로 그린다.
• 앨리먼트 타입이 같다면?
  1. key를 먼저 비교한다
  2. props를 비교해서 변경사항을 반영한다.

Event

Vanilla JS

• addEventListener
• on{event} onclick onmouseout onfocus onblur….

[React]

• on{event} (CamelCase)

Component ? Element ? DOM ?

DOM : 논리 트리 / 웹 페이지의 구조화된 표현
컴포넌트 : 엘리먼트의 집합 / 재사용 가능한 UI 조각
엘리먼트 : DOM의 노드 /

useState

상태값을 관리해주는 훅
useXXX 라고 불리는걸 리액트에서 훅이라고 부름

prev

React의 useState 훅에서 상태 업데이트 함수를 사용할 때, 이전 상태값(prev)에 접근할 수 있는 기능이 제공됩니다.
이는 상태 업데이트가 현재 상태에 의존하는 경우, 즉, 새로운 상태가 이전 상태를 기반으로 계산되어야 하는 경우에 매우 유용합니다.

상태 업데이트 함수는 (prevState) => newState 형태의 함수를 인자로 받을 수 있으며, 여기서 prevState는 상태의 이전 값을 나타냅니다.
이 패턴을 사용하면 상태 업데이트가 비동기적으로 일어나도, 항상 최신의 상태 값을 기반으로 업데이트가 이루어지도록 할 수 있습니다.

import React, {useState} from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const handleIncrement = () => {
        // 이전 상태 값을 사용하여 상태를 업데이트
        setCount(prevCount => prevCount + 1);
    };

    return (
        <div>
            <p>{count}</p>
            <button onClick={handleIncrement}>Increment</button>
        </div>
    );
}

lazy initialization

지연 초기화는 다음과 같은 경우에 특히 유용합니다:

1. 초기 상태 값이 복잡한 계산을 통해 얻어지는 경우
2. 초기 상태가 큰 데이터 구조를 포함하는 경우
3. 초기 상태 설정에 비용이 많이 드는 작업(예: 로컬 스토리지에서 데이터 불러오기)이 필요한 경우
4. 지연 초기화를 사용함으로써, 초기 렌더링의 성능을 향상시킬 수 있으며, 불필요한 계산을 줄일 수 있습니다.

// 코드에서 complexCalculation은 컴포넌트가 렌더링될 때마다 호출됩니다. 
// 그러나 실제로 상태가 필요할 때만 계산을 실행하고 싶다면, 이 방식은 비효율적일 수 있습니다.
const [state, setState] = useState(complexCalculation());

// lazy initialization
// 이 방식을 사용하면, complexCalculation 함수는 컴포넌트가 처음 렌더링될 때 한 번만 호출됩니다. 
// 이후의 렌더링에서는 이 함수가 호출되지 않으므로, 초기 상태의 계산 비용이 큰 경우 성능을 개선할 수 있습니다.
const [state, setState] = useState(() => complexCalculation());

Custom Hook

찍어내기 / 반복 => 함수화
useState, useEffect 등을 반복하는걸 모아서 함수화 시켜서 커스텀 훅을 제작 가능하다
React에서는 use로 시작하는 함수를 훅이라고 부른다.

useCamelCase는 커스텀 훅은 지칭하게 된다.

엔진 & 패키지 관리자

Node.js (Node)

• 설명: Node.js는 Chrome V8 JavaScript 엔진으로 구축된 JavaScript 런타임입니다. 서버 사이드 애플리케이션 구축에 주로 사용되며,
  비동기 이벤트 주도 아키텍처를 지원합니다.

npm (Node Package Manager)

• 설명: npm은 JavaScript 프로그래밍 언어를 위한 패키지 관리자입니다. Node.js에서 사용할 수 있는 모듈과 패키지를 관리하며, 코드를 공유하고
  재사용할 수 있는 플랫폼을 제공합니다.

npx (npm package runner)

• 설명: npx는 npm 패키지 러너로, Node.js 패키지를 실행하기 위한 도구입니다. 로컬에 설치하지 않고 npm 패키지를 실행할 수 있어, 일회성 명령
  실행에 유용합니다.

yarn

• 설명: yarn은 Facebook에서 개발한 새로운 JavaScript 패키지 매니저입니다. npm과 호환되며, 속도와 안정성, 보안성을 강조합니다. 패키지
  설치 시 동시성을 높여 효율을 개선합니다.