Redux란?

크로스 컴포넌트 또는 앱 와이드 상태를 위한 생태 관리 시스템이다.
먼저, 상태(state)는 세 가지로 구분된다.

1. 로컬 상태
   • 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태
   • 예를 들어 특정 UI를 감추거나 보여주는 토글
2. 크로스 컴포넌트 상태
   • 다수의 컴포넌트에 영향을 미치는 상태
   • prop 드릴링 발생
3. 앱 와이드 상태
   • 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태
   • 예를 들어 사용자 인증

Why Redux?

리액트 컨텍스트 또한 상태 관리 시스템인데 왜 리덕스가 필요할까?
리액트 컨텍스트는 잠재적인 단점이 몇개 있다.

1. 많은 컴포넌트와 내용이 있는 애플리케이션이라면 설정과 상태관리가 복잡해질 수 있다.
   • 심하게 중첩되는 JSX코드 & 다양하고 많은 ContextProvider 또는 유지하기 어려운 거대한 하나의 ContextProvider
2. 데이터가 자주 변경되는 경우 성능적으로 적합하지 않다.

Redux의 작동 방식

Redux는 애플리케이션에 있는 하나의 중앙 데이터 저장소이다.
여기서 데이터는 상태를 가르킨다.
애플리케이션은 한 개의 저장소만 갖게되며 그 저장소에 전체 애플리케이션의 모든 상태를 저장한다.
그렇다면 관리가 어려울 것 같지만 Redux는 다행히 그 저장소 전체를 항상 직접 관리할 필요가 없다.

구독(Subscription)

컴포넌트는 중앙 저장소에 있는 데이터(상태)의 변화를 감지하여 그에 맞는 대응을 하기위해 구독(Subscription) 을 설정한다.
컴포넌트가 저장소를 구독하면 데이터가 변경될 때마다 컴포넌트에게 알려주게 된다.

Reducer function

컴포넌트가 구독을 통해 받은 데이터는 변경이 필요하기도하다.
저장된 데이터를 어떻게 변경할까? 여기엔 아주 중요한 규칙이 있다.
컴포넌트는 절대로 저장된 데이터를 직접 조작하지 않는다.
그래서 구독을 하는 것이고 직접적은 흐름으로 봤을때 데이터는 절대로 반대 방향으로 흐르지 않는다.
그 대신 리듀서(Reducer) 라는 개념을 이용한다.
이 리듀서 함수를 설정하고 이 함수는 저장소 데이터의 변경, 즉 업데이트를 담당한다.

Action

구독과 Reducer가 있다. 이제 컴포넌트와 그 Reducer 함수를 어떻게 연결할까?
액션(Action) 이라는 개념이 있으며 컴포넌트가 액션을 발송한다.
예를 들면 어떤 컴포넌트 버튼이 있고 클릭 시 상태를 변경하는 함수를 실행하듯 컴포넌트가 어떤 액션을 트리거한다 말할 수도 있다.
액션은 단순한 자바스크립트 객체이며 Reducer가 수행해야 할 작업을 설명하게 된다.

정리

1. 컴포넌트가 Action을 발송(Action에는 수행해야 할 작업이 설명되어 있지만 그걸 직접하진 않음)
2. Reducer가 Action이 원하는 작업을 수행하고 새로운 상태를 뱉어낸다. 새로운 상태는 저장소의 기존 상태를 대체하게 된다.
3. 데이터 저장소의 상태가 업데이트되면 구독 중인 컴포넌트가 알림을 받게 되고 컴포넌트는 UI를 업데이트할 수 있게 된다.

React 애플리케이션의 성능을 최적화하기 위해 useMemo와 useCallback 훅을 사용하는 방법에 대해 알아보자.
이 두 훅은 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지해 성능을 향상시키는 데 중요한 역할을 한다.

useMemo

useMemo는 메모이제이션된 값을 반환하는 훅이다. 특정 값이 변경될 때까지 이전에 계산된 값을 재사용할 수 있게 하며, 이는 비용이 많이 드는 계산을 최적화하는 데 유용하다.

사용법

import React, { useMemo } from 'react';

const MyComponent = ({ num }) => {
  const squaredNum = useMemo(() => {
    console.log('Calculating squared number...');
    return num * num;
  }, [num]);

  return <div>Squared Number: {squaredNum}</div>;
};

설명

• useMemo의 첫 번째 인자는 계산 함수.
• 두 번째 인자는 의존성 배열로, 이 배열의 값이 변경될 때만 계산 함수가 호출된다.
• 위 예제에서는 num이 변경될 때만 제곱 값이 다시 계산된다.

useCallback

useCallback은 메모이제이션된 콜백 함수를 반환하는 훅이다. 콜백 함수가 필요 없는 재생성을 방지하여, 자식 컴포넌트에 전달할 때 참조 동일성을 유지할 수 있다.

사용법

import React, { useCallback } from 'react';

const MyComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <MyComponent onClick={handleClick} />;
};

설명

• useCallback의 첫 번째 인자는 콜백 함수.
• 두 번째 인자는 의존성 배열로, 이 배열의 값이 변경될 때만 콜백 함수가 재생성된다.
• 위 예제에서는 의존성 배열이 비어 있어, handleClick 함수는 컴포넌트의 수명 동안 변경되지 않는다.

useMemo와 useCallback의 차이점

자바스크립트의 함수는 객체의 한 종류이다.

const consoleFunction = (str) => {
   console.log(str);
}

위 코드를 보면 consoleFunction 변수에 함수 객체가 할당되어 있다.
이는 리액트에서 컴포넌트가 다시 렌더링된다면 완전히 새로운 함수가 생성됨을 의미한다.
말했듯이 자바스크립트에서 함수는 객체 이기 때문이다.
같은 모양과 같은 값이더라도 자바스크립트의 객체는 이를 동일하다고 여기지 않는다.
결국 불필요한 렌더링이 발생할 수 있는 상황이 생기는 것이다.
또한 함수를 useEffect같은 훅에서 의존성으로 추가한다면 상황에따라 무한루프를 유발할 위험도 있으며 최적화면에서도 좋지 않을거라 보인다.

useCallback은 함수를 재사용하여 이러한 점들을 개선할 수 있게 해주고 컴포넌트 성능을 최적화 시켜주는 Hook이다.

1. 이벤트 핸들러 함수의 잦은 재생성
2. 하위 컴포넌트에 props로 전달되는 함수의 잦은 재생성
3. 렌더링 최적화가 필요한 경우

useCallback 사용

useCallback도 useEffect와 같이 2개의 인자를 받는다.

import React, { useEffect, useCallback } from 'react';

function App() {

   const consoleFunction = useCallback(() => { console.log('useCallback') }, [dependency]);

   return (
      // 컴포넌트
   )
}

consoleFunction 안에있는 함수는 App 컴포넌트가 렌더링 될 때 만들어져 해당 함수의 주소가 들어간다.
그 다음 렌더링부터는 함수를 재생성하는 것이 아니라 기억된 주소를 가지고 재사용하는 것이다.
만약 의존성 배열안에 값이 있다면 해당 값이 변경될때만 안에있는 함수를 재생성하게 된다.

useEffct

컴포넌트의 Lifecycle을 3가지로 분류해보자.

1. 컴포넌트 마운트
2. 컴포넌트 업데이트(리렌더링)
3. 컴포넌트 언마운트

useEffect는 이러한 생명주기 사이사이에 간섭을 줄 수 있는 Hook이다.

useEffect 형태

useEffect는 실행할 함수코드 & 의존성 배열, 2가지의 인수를 받으며 컴포넌트가 렌더링 된 후에 실행된다.

1. 기본
   • 의존성 배열이 없는 경우 컴포넌트가 랜더링 될 때마다 side effect가 실행된다.

     import React, { useEffect } from 'react';
     

function App() { useEffect(() => { console.log('I am useEffect'); })

return ( // 컴포넌트 ) }

2. 빈 의존성 배열
    - 비어있는 의존성 배열이 있을 경우 컴포넌트가 마운트 될 때 한번만 실행된다.
```jsx
import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log('I am useEffect');
  }, [])

  return (
    // 컴포넌트
  )
}

3. 값이 있는 의존성 배열
   • 배열 내의 값이 변경될 때마다 실행된다, 의존성 값이 state라면 당연히 컴포넌트도 다시 렌더링된다.

     import React, { useEffect } from 'react';
     

function App() { useEffect(() => { console.log('I am useEffect'); }, [dependency])

return ( // 컴포넌트 ) }

### clean up
useEffect에 return문으로 함수를 추가하여 clean up 함수를 추가할 수 있다.   
이는 메모리 정리 및 오류를 방지하는데 도움이 된다.
```jsx
import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('timer');
    }, 1000);

    return () => {
      clearInterval(timer);
    }
  }, [dependency])

  return (
    // 컴포넌트
  )
}

useEffect의 return문, 즉 clean up function은 두 가지 경우에 실행된다.

1. 컴포넌트 언마운트

   • 컴포넌트가 DOM에서 제거될 때 실행되어 메모리 누수를 방지하고 컴포넌트 리소스를 정리할 수 있다.

2. side effect 실행 전

   • 의존성 배열에 있는 값이 변경되어 side effect가 다시 실행되기 전에 이전 side effect의 효과를 정리한다.

Ref

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.
일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다.
자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다.
그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다.
수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다.
React는 두 경우 모두를 위한 해결책을 제공합니다.
-React 공식홈페이지-

바닐라 자바스크립트에선 특정 DOM을 선택하기 위해 querySelector, getElementById 등과 같은 함수를 사용한다.
React를 사용하면서도 가끔 DOM을 직접 선택해야하는 상황이 필요한데 그럴때 useRef 라는 Reack Hook을 사용한다.
예시를 들어보자 !

import { useState } from "react";

export default function Player() {

  const [enteredName, setEnteredName] = useState(null);

  function handleClick(evt){
    setEnteredName(evt.target.value);
  }

  return (
    <section id="player">
      <h2>Welcome {enteredName ?? 'unknown entity'}</h2>
      <p>
        <input type="text" onChange={(evt) => handleClick(evt)}/>
        <button >Set Name</button>
      </p>
    </section>
  );
}

input에서 입력 받은 값을 h2에 출력하려한다.
state만을 사용하면 매번 값을 입력할때마다 setEnteredName함수로 인해 렌더링이 일어나고 실시간으로 h2에 출력값이 변경된다.

이런 방식이 아니라 Set Name 버튼을 클릭시 출력되게끔 하고싶다면 useRef 훅을 사용하면 좋다.

import { useState, useRef } from "react";

export default function Player() {
  const playerName = useRef();

  const [enteredName, setEnteredName] = useState(null);

  function handleClick(){
    setEnteredName(playerName.current.value);
    // playerName.current.value = '';
  }

  return (
    <section id="player">
      <h2>Welcome {enteredName ?? 'unknown entity'}</h2>
      <p>
        <input ref={playerName} type="text"/>
        <button onClick={handleClick}>Set Name</button>
      </p>
    </section>
  );
}

useRef 훅을 import해서 참조 값을 생성한다.
생성된 참조 값을 변수나 상수에 담고 이를 ref 속성을 통해 JSX요소들과 연결할 수 있다.
current 속성이 연결된 JSX의 참조 값을 가지고있으며 위와 같이 input의 value 속성에 접근이 가능하다.
결과를 확인해보면 useRef로 관리하는 값은 변해도 랜더링되지 않음을 수 있다.

State vs Ref

• state

1. 상태가 업데이트되면 컴포넌트가 렌더링된다.
2. UI에 바로 반영되어야 하는 값들이 있을 때 사용한다.
3. 시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들에는 사용하지 않는다.

• ref

1. 참조 값이 바뀌었다는 이유로 컴포넌트가 렌더링되지 않는다.
2. DOM 요소에 직접적인 접근이 필요할 때 사용한다.
3. ref를 사용한 명령형 코드는 피하도록 조심해야한다.

forwarRef

커스텀 컴포넌트는 ref속성이 존재하지 않아서 컴포넌트간 ref를 전달 받을 수 없다.
상위 컴포넌트에서 하위 컴포넌트로 ref를 전달하고 싶을때에 forwardRef를 사용하면 가능하다.

// 상위 컴포넌트
import { useRef } from "react";
import CustomInput from "./CustomInput"

const customRef = useRef();

function TopComponent() {
  return (
    <>
      <CustomInput name="peter" ref={customRef} />
    </>
  );
}

// 하위 컴포넌트
import { forwardRef } from "react";

const forwardCustomInput = forwardRef(function CustomInput({name}, ref) {
  return (
    <div>
      <input value={name} ref={ref} />
    </div>
  )
})

export default forwardCustomInput;

React에서 forwardRef를 import하고 forwardRef 함수로 컴포넌트 함수를 감싸준다.
감싸진 컴포넌트 함수는 첫번째 인자로 props를 받고 두번째로 전달된 ref를 받아서 사용한다.

Potal

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.
-React 공식홈페이지-

컴포넌트들의 상하 관계, 구조를 가지고 있는 DOM에서 자식 컴포넌트를 부모 컴포넌트 바깥에 있는 다른 컴포넌트에 전달할 수 있다는 뜻이다.
주로 index.html 의 root div 외에 다른 곳에서 Modal, Dialog 등을 띄우기 위해 많이 사용한다.

// index.html
<body>
  <div id="modal"></div>
  <div id="content">
    <div id="root"></div>
  </div>
  <script type="module" src="/src/main.jsx"></script>
</body>

// modal 컴포넌트
import { createPortal } from "react-dom"

function CustomModal() {

    return createPortal(
        <dialog className="result-modal">
            <h2>My name is Peter parker</h2>
            <form method="dialog">
                <button>Close</button>
            </form>
        </dialog>,
        document.getElementById('modal')
    );
}

export default CustomModal;

React DOM 라이브러리에서 createPortal을 import하고 JSX코드를 감싸준다.
두번째 인자로는 JSX코드의 부모가 될 DOM node를 선택해준다.

선택한 node로 modal 컴포넌트가 이동된 것을 확인할 수있다.

Tailwind CSS는 어떤 웹 프로젝트에서든 사용할 수 있는 CSS 프레임워크로 HTML 요소에 mb-6 , flex 와 같이 미리 정의된 클래스를 추가하여 스타일링 할 수 있다.

설치

설치법은 공식 문서에 잘 나와있다.
본인은 vite를 사용하므로 관련 페이지 에서 설치법을 찾아보았다.

1. Tailwind CSS를 터미널에서 설치한다.

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. 설치 후 생성된 tailwind.config.js 파일에서 경로를 구성한다.

   /** @type {import('tailwindcss').Config} */
   export default {
   content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
    extend: {},
   },
   plugins: [],
   }

3. 메인 CSS 파일에 아래 코드를 추가하여 Tailwind CSS 스타일을 추가한다.
   @tailwind 디렉티브는 빌드시에 CSS 코드로 변환된다고 한다.

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

추천하는 확장 프로그램

Tailwind CSS의 공식 문서에세 정의된 모든 클래스의 이름을 찾아볼 수 있지만 번거로움을 조금이라도 줄이기위한 Tailwind CSS IntelliSense 라는 확장 프로그램이 있다.
이는 Tailwind 팀에서 자체적으로 출시한 것으로 코드를 작성할때 클래스 이름을 제안 받고 해당 클래스가 어떠한 스타일링이 적용되는지 미리 확인해볼 수 있는 아주 좋은 프로그램이다.
설치하는 것을 적극 추천한다.

장단점

• 장점

1. CSS를 많이 알지 못하더라도 비교적 접근하기 쉽다.

   아래와같이 정의된 클래스들을 넣어주면 스타일이 적용된다.
   

2. 바닐라 CSS도 사용 가능하다.

   Tailwind에서 정의한 클래스만 사용하는 것이 아니라 본인이 직접 정한 스타일링 규칙도 CSS 파일에 추가하여 사용한다.
   

3. 커스텀(사용자 정의)가 가능하다.

   폰트를 설정한 예시
   

4. 스타일링된 재사용이 가능한 컴포넌트를 만들 수 있다는 것이 리액트와 잘 어울린다.

• 단점

1. 긴 클래스 이름 값을 가진 요소들이 생긴다.
2. JSX 코드에서 편집이 이루워지므로 스타일 코드와 JSX 코드 사이에 강한 분리가 없다.

Vanilla CSS

장단점

• 장점

1. 말 그대로 바닐라 CSS이기 때문에 특별한 관례를 따르지 않아도 된다.
2. 컴포넌트 파일에서 import해서 사용하니 스타일링을 추가하려는 사람으로 인해 방해를 받거나 간섭을 받지 않고 컴포넌트 작업을 할 수 있다.

• 단점

1. CSS를 알아야 한다.
2. CSS 코드와 규칙은 여러개의 파일로 나누어 특정 컴포넌트 파일로 import하더라도 해당 컴포넌트로 스코핑되지 않는다.
   즉, 다른 컴포넌트 간에 스타일 충돌이 발생할 수 있다.

Inline 스타일

style 속성에 중괄호가 필요하고 카멜 표기법 or 작은 따옴표로 key를 지정한다.

설정한 jsx 요소에만 영향을 미친다는 장점이 있지만 모든 요소를 개별적으로 스타일하므로 추가와 수정에 효율적이지 않다.

<p style={{textAlign: 'center'}}>Inline styling</p>
// 조건부 스타일링
<input style={{backgroundColor: 1 === 1 ? 'red' : 'black'}} />

CSS module

CSS 모듈을 사용하여 스타일 코드와 규칙을 컴포넌트에 스코핑되도록 할 수 있다.

많은 컴포넌트를 사용하는 큰 프로젝트라면 각각 자체의 CSS 파일을 갖게되는 단점도 있다.

CSS 파일명에 .module 패턴을 추가한다.
이는 기본 빌드 프로세스에 대한 신호로 볼 수 있다.

CSS 모듈을 사용한 컴포넌트에서 아래와 같이 import 한다음 사용하면된다.

랜더링된 DOM에 적용된 클래스와 헤더 섹션에 주입된 스타일 살펴보면 이상한 이름이 있는 것을 볼 수 있는데 이는 빌드 툴에 의해 자동으로 생성된 것이다.
이것이 CSS 모듈의 개념이며 이 클래스 이름은 이제 해당 컴포넌트에 대해 고유하게된다.

styled-components

개념

styeld-components 패키지는 바닐라 CSS를 기반으로하는 솔루션 중 하나로 CSS 규칙이나 스타일을 별도의 파일이나 인라인 스타일로 지정하지 않고 해당 패키지의 도움을 받아 생성된 특별한 컴포넌트내에서 정의하는 것이다.
터미널에서 npm install styled-components를 실행하여 설치 할 수있다.

적용하기

styled-components로부터 styled를 import하고 자바스크립트 객체인 styled를 사용하여 다른 속성에 접근한다.
매핑되는 속성들은 해당 html 요소를 개발자가 설정한 스타일을 가지는 개별 컴포넌트로 만들어준다.
작성한 요소 속성 다음 백틱 안에 원하는 스타일을 설정하면 된다.

적용된 스타일을 살펴보면 styled-components는 고유한 CSS 클래스 이름은 생성하고 헤더 섹션에서 해당 클래스에대해 개발자가 작성한 CSS 규칙을 정의한다.
그런 다음 생성된 클래스를 요소에 추가한다.

조건부 스타일링 또한 가능하며 styled-components 스타일링 코드에서만 사용하고 싶은 속성에는 달러 기호를 사용하는 것이 일반 규칙이다.
이렇게하면 내장 속성과 출동하지 않는다.

가상 선택자, 중첩 규칙 & 미디어 쿼리

& 기호를 사용하여 해당 요소내의 다른 요소들의 규칙이나 미디어 쿼리를 작성한다.
아래 사진처럼 & 기호가 header 요소를 가르키는거라 생각하면 될 것같다.

& 다음 공백이 있어야 해당 요소의 하위 요소가 목표가된다.

가상(pseudo) 선택자의 경우 아래와 같이 작성한다.

해당 요소 자체가 목표가 되어야 하는 경우 & 기호다음 빈 공간 없이 작성한다.

장단점

• 장점

1. 꽤 간단하며 많은 추가 작업이 필요하지 않다.
2. 스타일이 자동으로 범위가 지정되어 CSS 규칙이나 스타일 충돌이 발생하지 않는다.

• 단점

1. 바닐라 CSS를 알아야한다.
2. 스타일이 컴포넌트와 동일한 파일 혹은 옆에 정의 되어 있기에 강한 분리가 없다.
3. 버튼이나 입력 컴포넌트와 같은 비교적 작은 래퍼(warpper) 컴포넌트가 많이 생기는 경향이 있다.

public/폴더

이미지를 public/폴더 에 저장하면 index.html 혹은 index.css 파일에서 직접 참조할 수 있다.

이러한 이유는 public/ 에 저장된 이미지(파일)이 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공 되기 때문이다.
index.html과 마찬가지로, 이 파일들은 브라우저 내에서 직접 방문할 수 있다.
ex) localhost:5173/some-image.jpg

src/assets/폴더

이미지나 파일를 src 폴더 또는 src/assets/(src폴더 어디든) 과 같은 하위 폴더에 저장하면 이는 공개적으로 제공되지 않는다.
localhost:5173/some-image.jpg과 같은 방식으로 웹사이트 방문자가 접근할 수 없다.
대신 이러한 파일은 코드 파일에서 사용할 수 있다.
코드 파일에가져온 이미지는 빌드 프로세스에 의해 인식되어 최적화되며, 웹사이트에 제공하기 직전에 public/ 폴더에 삽입 된다.

어떤 폴더를 사용해야 할까?

빌드 프로세스에 의해 처리되지 않는 정적인 이미지나 파일은 public/ 폴더를 사용한다.
예를 들면 index.html이나 파비콘과 같은 이미지가 좋은 후보다.
반면 컴포넌트 내 에서 사용되는 이미지는 일반적으로 src/ 폴더에 저장되어야한다.

컴포넌트

컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고 차후에 혼합하여 전반적인 UI를 구축할 수 있다.
결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것이다.
컴포넌트는 HTML과 경우에 따라 CSS코드, 관련된 자바스크립트 로직 등을 감싼다고 볼 수 있다.
이로 인해 복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분리하여 다른 위치에서도 사용할 수 있게 해준다.
컴포넌트 접근 방식의 가장 큰 장점이다.

• 재사용성
• 관심사의 분리 : 단일책임으로 복잡성↓, 가독성↑, 협업 & 오류 수정에 용이
• 리액트에서 컴포넌트로 인식되기 위해 함수의 이름이 대문자로 시작해야하며 렌더링 가능한 값이 반환 되어야한다.

JSX

JSX는 JavaScript Syntax Extension, 즉 JavaScript 문법 확장자를 의미한다.
이 확장자는 개발자가 자바스크립트 파일 내에 HTML 마크업 코드를 작성하여 HTML 요소를 설명하고 생성할 수 있게 해준다.
JSX는 브라우저에는 사용할 수 없지만 브라우저에 도달하기 전에 개발 서버에서 변환되어 보다 편리하게 UI를 생성할 수 있다.

• 반드시 부모 요소 하나가 감싸는 형태여야 한다.
  → Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적인 비교를 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하는 규칙

  // div 태그로 감싸기
  function App() {
  return(
    <div>
      <h2>Hello</h2>
      <h2>World</h2>
    </div>
  )
  }
  

// Fragment(<></>)로 감싸기 function App() { return(

Hello

World

function App() { return( <>

Hello

World

- JSX 안에서도 중괄호로 자바스크립트 표현식을 사용할 수 있다.
```javascript
function App() {
  const name = 'Tom';
  return(
    <>
      <h2>Hello</h2>
      <h2>{name}</h2>
    </>
  )
}

props

props는 properties의 줄임말로 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.
props는 객체이며 하위 컴포넌트에서 props.이름(key)으로 접근할 수 있다.

• 하위 컴포넌트 입장에서 props는 읽기 전용이다.(수정 불가)
• 상위 컴포넌트에서 props를 변경하면 해당 props를 사용하고 있는 하위 컴포넌트가 리렌더링된다.

// 상위 컴포넌트
import Header from './components/Header';
function App() {
  return(
    <>
      <Header name="Tom"/>
    </>
  );
}

// 하위 컴포넌트
function Header(props) {
  return(
    <header>
      <h2>{props.name}</h2>
    </header>
  )
}

• 구조분해할당도 가능하다.

  // 상위 컴포넌트
  import Header from './components/Header';
  function App() {
  const info = {
    name: 'Tom',
    age: 18
  }
  
  return(
    <>
      <Header {...info}/>
    </>
  );
  }
  

// 하위 컴포넌트 function Header({name, age}) { return(

- children prop : 리액트에서 설정한 내장 prop으로 컴포넌트 사이 내용(택스트)을 의미한다.
```javascript
// 상위 컴포넌트
import Header from './components/Header';
function App() {
  return(
    <>
      <Header>My name is Tom</Header>
    </>
  );
}

// 하위 컴포넌트
function Header(props) {
  return(
    <header>
      <h2>{props.children}</h2> // <h2>My name is Tom</h2>
    </header>
  )
}

• props를 단일 객체로 그룹화 : ...을 사용하여 하나의 객체에 props로 분류되는 모든 것을 모아온다.

  // 상위 컴포넌트
  import Header from './components/Header';
  function App() {
  return(
    <>
      <Header id="basicHeader" className="headerClass">
        My name is Tom
      </Header>
    </>
  );
  }
  

// 하위 컴포넌트 function Header({children, ...props}) { return( <header {...props}> //

- 기본값 설정
```javascript
// 상위 컴포넌트
import Header from './components/Header';
function App() {
  return(
    <>
      <Header id="basicHeader" className="headerClass">
        My name is Tom
      </Header>
    </>
  );
}

// 하위 컴포넌트
function Header({children, ...props, HeaderContainer = 'div'}) {
  return(
    <HeaderContainer> // <div>로 작동
      <header {...props}> // <header id="basicHeader" className="headerClass">
        <h2>{children}</h2>
      </header>
    </HeaderContainer>
  )
}

useState

리액트 Hook중 하나인 useState는 컴포넌트의 상태를 편하게 생성하고 관리할 수 있는 도구이다.
state 생성과 동시에 가져야할 초기값을 useState 함수에 인자로 넣어주면 state와 setState를 배열 형태로 리턴해준다.

const [state, setState] = useState(); // [현재 상태, 상태 업데이트 함수] 

컴포넌트의 현재 상태 값은 state 변수에 담겨져있고, setState함수를 이용해 변경할 수 있다.(state & setState는 마음대로 지정 가능)
state가 변경되면 해당 컴포넌트는 다시 렌더링이 된다.

참조형과 기본형

String, Number, boolean은 모두 기본형(Primitive type) 이다.
자바스크립트의 기본형 값의 특징은 변경할 수 없다는 점이다.

let name = 'Tom';
name = 'Tom Holland';

name = name.concat(' Holland');

// 재할당을 하면 기존의 값은 삭제되고 새로운 문자열이 생성된다.

객체를 다룰 때는 다르다.
자바스크립트 객체는 참조형(Reference Type) 값이며 이는 변수에 값을 저장할 때 값 자체를 저장하는것이 아니라, 해당 값의 메모리 주소를 저장한다.
만약 push를 호출하면 자바스크립트에서 해당 주소를 찾아 그 주소의 값을 열어 배열을 확인한 후 메모리에 있는 해당 배열에 새 원소를 추가한다.
메모리의 배열은 수정되지만 주소는 변하지 않는것이다.

const name = ['Tom', 'Holland'];
name.push('Spider-Man');

따라서 const에 저장된 객체는 재할당 할 수는 없지만 객체는 주소를 참조해 액세스된다는 점을 활용해 메모리 주소에 있는 값을 조작할 수 있다.

화살표 함수(Arrow function)

화살표 함수는 표기법이 간단하기 때문에 익명 함수를 다른 함수의 인수로 넘길 때 주로 사용한다.
단지 표기법에서만 다른 것이 아니고, 몇가지 미묘한 차이점이 있다.

• 매개변수 목록 괄호 생략하기
  화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있다.

  (name) => {}
  // 매개변수가 하나인 함수를
  name => {}
  // 위처럼 사용 가능하다. *매개변수가 없는 경우에는 괄호를 생략해서는 안된다.

• 함수 본문 중괄호 생략하기
  화살표 함수에 반환문 외에 다른 로직이 없는 경우, return 키워드와 중괄호를 생략할 수 있다.

• return 할 값이 객체라면 괄호는 필수이다.

  number => {return number * 3;}
  // ↓
  nuber => number *3;

script 태그에 type="module"로 설정하면 해당 파일은 모듈로서 동작하게된다.

<script src="app.js" type="module">

모듈이란?

JavaScript 코드를 담고 있는 파일이다.
다만 일반적인 JavaScript 파일과는 다른 차이점을 가지고 있다.

• import 혹은 export 구문을 사용할 수 있다.
• 별다른 처리를 해주지 않아도 엄격 모드로 동작한다.
• 모듈의 가장 바깥쪽에서 선언된 이름은 전역 스코프가 아니라 모듈 스코프에서 선언된다.

모듈 스코프

모듈 내부의 가장 바깥 스코프에서 이름을 선언하더라도, 전역 스코프가 아니라 모듈 스코프에서 선언된다.
모듈 스코프에 선언된 이름은 export 해주지 않는다면 해당 모듈 내부에서만 접근할 수 있다.

// util.js
let apiKey = 'Is api key';

// app.js
import {apiKey} from './util.js';

console.log(apiKey); // undefined

import & export

모듈 스코프에서 정의된 이름은 export 구문을 통해 다른 파일에서 사용할 수있다.
단순히 값을 저장하고 있는 변수뿐만 아니라, 함수나 클래스도 export를 통해 여러 모듈에서 재사용할 수 있다.

// util.js
let apiKey = 'Is api key';
function add(x, y) {
    return x+y;
}

export {apiKey, add};

// app.js
import {aptKey, add} from './util.js';

console.log(apiKey); // Is api key
console.log(add(1, 2)); // 3

• 선언과 동시에 export

  export let name = 'Tom';
  export let job = 'Spider-Man';

• default export
  export default 구문을 통해 모듈을 대표하는 하나의 값을 지정하고 그 값을 불러와 사용할 수 있다.

  // util.js
  function add(x, y) {
  return x + y;
  }
  

export let name = 'Tom';

export default add;

```javascript
// app.js
import add from './util.js';

console.log(add(1, 2)); // 3

• 다른 이름으로 import & export 하기
  default export와 일반적인 export를 동시에 가져올 수 있으며 이름뒤에 as를 붙혀서 다른 이름으로 사용할 수도 있다.

  // app.js
  import add, {name as myName} from './util.js';
  

console.log(add(1, 2)); // 3 console.log(myName); // Tom ```

React란 무엇이며, 왜 사용할까?

What is React?
바닐라 자바스크립트를 이용한 사용자 인터페이스 구축 라이브러리다.

Why?
React를 사용하는 웹사이트를 살펴보자, 예를 들면 넷플릭스.
화면의 전환이 매우 부드럽고 반응이 즉각적이며 새 페이지가 로딩되는 듯한 효과가 전혀 없다.
React는 자바스크립트 라이브러리라서 브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트한다.
그게 가능한 이유는 자바스크립트가 웹사이트 백그라운드에서 실행되며 로딩이 완료된 페이즈를 읽고 조작할 수 있기 때문에다.

React vs Vanilla JS
React로 작업할땐 코드를 선언형으로 작성한다.
즉, 목표로 하는 UI 상태를 정의할 뿐 거쳐야 할 단계는 정의하지 않는다.
React가 과정을 알아서 파악해 필요한 단계를 수행한다.
반면 바닐라 자바스크립트는 선언형이 아닌 명령형으로 작성한다.
다시 말해 목표가 아니라 거쳐야할 단계를 정의한다.

크롬 확장 프로그램에서 추가하면 개발자 모드에서 관련 텝을 사용할 수 있다. Components 텝에서 우리가 작성한 컴포넌트들만을 확인할 수 있으며

해당 컴포넌트의 props와 랜더링되는 부모 요소도 한눈에 볼 수 있다.

또한 사용중인 hook을 수정하며 테스트가 가능하다. Input 입력란에 잘못된 값이 들어왔을때 state가 false로 바뀌어 style이 변경되며 입력이 되지 않게 코딩되어 있는데 아래와 같이 devTools에서 state를 수정하여 간편하게 확인할 수 있다.

React를 사용하는 입장에서 좋은 Tool이라 생각된다. 앞으로 잘 애용해보자 :)

버전을 명시해 v5로 설치하니 문제 없이 잘 설치된다.

끝!

더 행복하면 불안할 것 같고, 덜 행복하면 불행할 것 같다

그러니까 딱 이 정도만 행복하고 싶다.

난 지금 행복하다 : )

왜 TypeScript를 사용할까?

우리가 사용하는 브라우저들(크롬, 엣지, 파이어폭스, 사파리 등)은 TypeScript를 이해하지 못한다.
그래서 Javscript로 변환해서 로드해야 진행할 수 있다.
이렇게만 들었을 땐 번거로울 것 같은데 무슨 장점이 있길래 TypeScript를 사용하는 걸까?

function add(num1, num2) {
    console.log(num1 + num2);
};

add(1,2); // 3
add(1,2,3); // 3
add('Petter', ' Parker'); // 'Petter Parker'

위와 같은 코드가 있다고 가정했을 때 add 함수는 숫자를 더하기 위한 목적으로 개발자가 만들었지만 인수를 잘못 넣어도 Javascript는 어떠한 힌트도 주지 않는다.
또한 문자열을 넣어도 정상적으로 작동하여 실수가 분명하더라도 알지 못하거나 직접 찾아봐야한다.

하나의 예시를 더 들어보자.

function showNumber(arr) {
    arr.forEach((i) => {
        console.log(i);
    });
};

showNumber([1,2,3]); 
// 1
// 2
// 3

showNumber(1,2,3);
// TypeError: arr.forEach is not a function

showNumber 함수는 배열을 받아 반복문을 실행하는 함수인데 배열이 아닌 다른 인수를 받게되면 forEach 메서드가 없어 TypeError가 발생한다.

이렇게 Javascript는 실행되는 시점, 즉 런타임에 타입이 결정되고 오류가 있다면 그 때 발견하게 되는 동적언어다.
반면 Java같은 정적언어는 컴파일 타임에 타입이 결정되고 오류가 발견된다.
그래서 코드 작성 시간은 오래 걸리겠지만 초기에 생각을 많이 해서 코드를 작성한다면 안정적으로 작업을 진행할 수 있는 장점이 있다. TypeScript도 이러한 정적 타입의 언어이다.

위에 있는 예제들을 TypeScript로 작성 해보자.
콜론과 함께 원하는 type을 적어주면 해당 인수는 지정한 type의 데이터만 들어와야하며 이와 맞지 않는 경우 오류들을 잡아준다.

Generator란?

Generator는 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능이다.
function 옆에 을 넣어서 만들고 내부에 *yield** 키워드를 사용하며 이를 이용해 함수의 실행을 멈춘다.
Generator 함수를 실행하면 Generator객체가 반환되며 next, return, throw 메서드를 가지고있다.

function* fn() {
    yield 1;
    yield 2;
    yield 3;
    return 'end';
}

const gFn = fn();

next()

next를 호출하면 가장 가까운 yield문을 만날때까지 실행하고 데이터 객체를 반환한다.
반환되는 데이터 객체로는 value와 done을 갖으며 value는 yield 오른쪽에 있는 값이고 생략한다면 undefined이다.
done은 함수코드가 끝났는 지를 나타낸다.

function* fn() {
    console.log('Tom');
    yield 'Holland';

    console.log('Petter');
    console.log('Parker');
    yield 'Spider-Man';

    return 'end';
};

const gFn = fn();

gFn.next();
// 'Tom'
// {value: 'Holland', done: false}

gFn.next();
// 'Petter'
// 'Parker'
// {value: 'Spider-Man', done: false}

gFn.next();
// {value: 'end', done: true}

return() / throw()

return을 호출하면 그 즉시 done속성 값이 true가 된다.

function* fn() {
    console.log('Tom');
    yield 'Holland';

    console.log('Petter');
    console.log('Parker');
    yield 'Spider-Man';

    return 'end';
};

const gFn = fn();

gFn.return('finish');
// {value: 'finish', done: true}

throw도 마찬가지로 done을 true로 바꾸며 catch문을 실행한다.

function* fn() {
    try{
        console.log('Tom');
        yield 'Holland';

        console.log('Petter');
        console.log('Parker');
        yield 'Spider-Man';

        return 'end';
    }catch(e){
        console.log(e);
    }
};

const gFn = fn();

gFn.throw(new Error('Err...'));
// 49037:1 Uncaught Error: Err... at <anonymous>:18:11

Generator === iterable

iterable이란 반복이 가능하다는 뜻으로 몇가지 조건이 있다.

• Symbol.iterator 메소드가 구현되어있어야 하며 이 메소드를 호출한 결과를 iterator라고한다.
• iterator는 value와 done 속성을 반환하는 next메서드를 가진다.
  배열 또한 iterable하다고 볼 수 있다.

  const arr = [1,2,3];
  const it = arr[Symbol.iterator]();
  

it.next(); // {value: 1, done: false}

it.next(); // {value: 2, done: false}

it.next(); // {value: 3, done: false}

it.next(); // {value: undefined, done: true}

**Generator**는 **iterable**객체이며 **iterable**은 **for of**를 통해 순회할 수 있다.
```javascript
function* fn(){
    yield 1;
    yield 2;
    yield 3;
};

const it = fn();

/*Generator에서 Symbol.iterator를 실행한 값이 자기 자신이다.*/
it === it[Symbol.iterator](); //true

for(let i of it) {
    console.log(i);
};
// 1, 2, 3

/*문자열도 가능할까?*/
const name = 'Tom';
const n = name[Symbol.iterator]();

for(let i of n) {
    console.log(i);
};
// 'T', 'o', 'm'

next()에 인수 전달

function* add() {
    const num1 = yield '첫 번째를 숫자 입력하세요';
    console.log(num1);

    const num2 = yield '두 번째를 숫자 입력하세요';
    console.log(num2);

    return num1 + num2;
};

const fn = add();

fn.next();
// {value: '첫 번째를 숫자 입력하세요', done: false}

fn.next(1);
// 1
// {value: '두 번째를 숫자 입력하세요', done: false}

fn.next(2);
// 2
// {value: 3, done: true}

Generator는 값을 미리 만들어 두지 않는다.

Generator는 필요할 때만 값을 연산해주기 때문에 아래와 같은 무한반복자를 만들어 사용해도 브라우저가 뻗지 않는다.

function* fn(){
    let num = 0;
    while(true){
        yield num++;
    }
};

const a = fn();

a.next(); // {value: 0, done: false}
a.next(); // {value: 1, done: false}
a.next(); // {value: 2, done: false}

yield*

yield 옆에 *을 붙혀 반복가능한 다른 객체를 불러올 수 있다.

function* gen1() {
    yield 'T';
    yield 'o';
    yield 'm';
};

function* gen2() {
    yield 'My name is';
    yield* gen1();
};

/*구조분해할당을 사용하면 for of와 마찬가지로 done이 true가 될때까지 값을 펼쳐주는 역할을 한다.*/
console.log(...gen2());
// My name is T o m

Generator는 다른 작업을 하다가 다시 돌아와서 next를 해주면 진행이 멈췄던 부분부터 이어서 실행할 수 있다는 장점이 있다.

async

async와 await을 사용하면 Promise에 then 메소드를 체인형식으로 호출하는 것보다 가독성이 좋아진다.
함수 앞에 async 키워드를 붙혀주면 항상 Promise를 반환한다.

async function getName() {
    return 'Tom';
};

console.log(getName());
// Promise {<fulfilled>: 'Tom'}

async function getMyName() {
    return new Promise((res, rej) => {
        res('Petter');
    });
};

getMyName().then((name) => console.log(name)); // 'Petter'

await

await 키워드는 async 함수 내부에서만 사용할 수 있다.
await 옆에는 Promise가 오고 해당 Promise가 처리될 때 까지 기다린다.

function getName(name) {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(name);
        }, 3000);
    });
};

async function showName() {
    const result = await getName('Petter');
    console.log(result);
};

showName();
// 3초뒤 'Petter'

Promise의 체인형식 then 메소드를 async, await으로 바꿔보자.
예외처리에는 try /catch 문을 사용해주면 된다.

const fn1 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('1번 함수 실행');
        },3000);
    });
};

const fn2 = (msg) => {
    console.log(msg);
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('2번 함수 실행');
        },6000);
    });
};

const fn3 = (msg) => {
    console.log(msg);
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('3번 함수 실행');
        },2000);
    });
};

console.log('start');
console.time('time-check');
// fn1()
//     .then((result) => fn2(result))
//     .then((result) => fn3(result))
//     .then((result) => console.log(result))
//     .catch((err) => console.log(err))
//     .finally(() => {
//         console.log('end');
//         console.timeEnd('time-check');
//     });

async function start() {
    try {
        const result1 = await fn1();
        const result2 = await fn2(result1);
        const result3 = await fn3(result2);
        console.log(result3);
    } catch(err) {
        console.log(err);
    }

    console.log('end');
    console.timeEnd('time-check');
};

start();
// start, 1번 함수 실행, 2번 함수 실행, 3번 함수 실행, end
// time-check: 11024.880859375 ms

promise.all 또한 사용 가능하다.

console.log('start');
console.time('time-check');

async function startAll() {
    try {
        const result = await Promise.all([fn1(), fn2(), fn3()]);
        console.log(result);
    } catch(err) {
        console.log(err);
    }

    console.log('end');
    console.timeEnd('time-check');
};

startAll();
// start, ['1번 함수 실행', '2번 함수 실행', '3번 함수 실행'], end
// time-check: 6006.072998046875 ms

Promise란 ?

Promise는 자바스크립트 비동기 처리에 사용되는 객체다.
여기서 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미한다.

const pr = new Promise((resolve, reject) => {
    // code
})

new Promise로 생성하며 인수로 함수를 전달 받는데 resolve는 성공, reject는 실패했을 때 실행되는 함수다.
이렇게 어떠한 작업이 완료되고 실행되는 함수를 callback함수라고 한다.

Promise의 3가지 상태(states)

Promise의 상태란 처리 과정을 의미한다.
Promise를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태로 result는 undefined이다.
• Fulfilled(이행) : 비동기 처리가 완료되어 resolve를 호출하면 Fulfilled가 된다. 이때 result는 resolve 함수로 전달된 값이다.
• Rejected(실패) : 비동기 처리가 실패하면 즉 reject가 호출되면 Rejected가 되며 result는 reject로 전달된 error이다.

then / catch / finally

then을 이용하여 resolve와 reject를 처리할 수 있다.

const pr = new Promise((resolve, reject) => {

    let isTrue = true;

    setTimeout(() => {
        if(isTrue){

            resolve('success');
        }else{
            reject('fail');
        }
    }, 3000)
});

pr.then(
    function(result){ // 이행 되었을때
        console.log(result); // 'success'
    },
    function(err){ // 거부 되었을때
        console.log(err); // 'fail'
    }
);

then 이외에 사용할 수 있는것은 catch와 finally이다.
catch는 reject인 경우에만 실행된다.
catch문을 사용하면 가독성도 더 좋고 첫 번째 함수를 실행했을때 나오는 error를 잡아줄 수 도 있기때문에 사용하는 것이 더 좋다.

pr.then(
    function(result){ 
        console.log(result);
    }
).catch(
    function(err){
        console.log(err);
    };
);

finally는 이행이든 거부든 처리가 완료되면 항상 실행된다.
로딩 화면 같은 것을 없앨 때 유용하다.

pr.then(
    function(result){ 
        console.log(result);
    }
).catch(
    function(err){
        console.log(err);
    }
).finally(
    function(){
        console.log('end');
    }
);
// 'success'
// 'end'

callback hell에서 벗어나기

아래와 같이 1,2,3번 함수를 실행하는 로직을 Promise를 사용하지 않고 구현 한다면 로직이 추가될수록 뎁스가 깊어지면서 callback hell, 콜백 지옥에 빠지게 된다.

const fn1 = (callback) => {
    setTimeout(() => {
        console.log('1번 함수 실행');
        callback();
    }, 3000)
};

const fn2 = (callback) => {
    setTimeout(() => {
        console.log('2번 함수 실행');
        callback();
    }, 6000)
};

const fn3 = (callback) => {
    setTimeout(() => {
        console.log('3번 함수 실행');
        callback();
    }, 2000)
};



console.log('start');
console.time('time-check');

fn1(function(){
    fn2(function(){
        fn3(function(){
            console.log('end');
            console.timeEnd('time-check');
        })
    })
});
// start, 1번 함수 실행, 2번 함수 실행, 3번 함수 실행, end
// time-check: 11027.3369140625 ms

callback함수가 아닌 Promise를 사용하여 구현해보자.
아래와 같이 Promise들이 연결되는 것을 Promise chaining이라 한다.

const fn1 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('1번 함수 실행');
        },3000);
    });
};

const fn2 = (msg) => {
    console.log(msg);
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('2번 함수 실행');
        },6000);
    });
};

const fn3 = (msg) => {
    console.log(msg);
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('3번 함수 실행');
        },2000);
    });
};

console.log('start');
console.time('time-check');

fn1()
    .then((result) => fn2(result))
    .then((result) => fn3(result))
    .then((result) => console.log(result))
    .catch((err) => console.log(err))
    .finally(() => {
        console.log('end');
        console.timeEnd('time-check');
    });
// start, 1번 함수 실행, 2번 함수 실행, 3번 함수 실행, end
// time-check: 11042.4560546875 ms

Promise.all

Promise.all은 여러개의 Promise들을 비동기적으로 실행하여 처리 할 수 있으며, 하나의 Promise라도 reject를 반환하거나 오류가 날 경우 모든 Promise들을 reject 처리한다.
하나의 정보라도 누락될 경우 화면을 보여줘서는 안될 때 사용하곤 한다.

console.time('time-check');
Promise.all([fn1(), fn2(), fn3()]).then((res, rej) => {
    console.log(res);
})
.catch((err) => console.log(err))
.finally(() => console.timeEnd('time-check'));
// ['1번 함수 실행', '2번 함수 실행', '3번 함수 실행']
// time-check: 6007.13916015625 ms

Promise.race

Promise.race는 하나의 Promise라도 1등으로 완료되면 종료된다.
용량이 큰 이미지들을 로딩하는데 그중 하나라도 완료되면 그 이미지를 보여줄 때 사용하면된다.

console.time('time-check');
Promise.race([fn1(), fn2(), fn3()]).then((res, rej) => {
    console.log(res);
})
.catch((err) => console.log(err))
.finally(() => console.timeEnd('time-check'));
// 3번 함수 실행
// time-check: 2009.635986328125 ms