1. props

• 리액트 컴포넌트는 props를 사용해 서로 통신한다.

• 부모는 자식에게 객체, 배열, 함수를 포함한 모든 JS 프로퍼티 값들을 전달할 수 있다.

  • 전달 불가능한 값?
  • 예시

  function Avatar({ person, size }) {
    // ...
  }
  
  function Avatar(props) {
    let person = props.person;
    let size = props.size;
    // ...
  }
  
  //propsr가 많을 시 spread 구문 사용 가능
  
  function Profile(props) {
    return (
      <div className="card">
        <Avatar {...props} />
      </div>
    );
  }
  
  

2. Suspense

체감 대기 시간을 줄여주는 AI Loading

문제

• 프로젝트에 사용할 로딩 컴포넌트를 만들고 싶다.
• AI 모델을 돌리는 과정이 있어서 진행도를 보여주고 싶다.
• 내가 생각한 진행도를 보여주는 방법
  • AI모델이 진행도를 뱉게 하기
    • 리액트 쿼리를 이용해 서버에서 진행도 받아오기
  • 로딩 상태를 수치화하기
• 후자의 경우로 한다면 Suspense의 fallback에 로딩 컴포넌트를 자식으로 부여해야 한다.
• Suspense에 대해 정확히 알고 넘어가야 제대로된 컴포넌트 활용이 가능할 것 같다.
  • 근데 fallback을 어떻게 수치화하지..

사용

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

• 의미 : Album 컴포넌트의 렌더링이 Success되기 전 까지 Suspens.fallback의 Loading 컴포넌트로 대체l한다.

lazy

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));