단축키

npx create-react-app .
npm run start
rfce

스타일링

js 에서 css

• 이는 절대 불러올 수 없는데 CRA 가 웹핵에서 불러온 기술로 작동하는것

1. css

- JS에서 어떻게 CSS 파일을 불러올 수 있는 걸까?
- CRA를 통해 설치된 웹팩이 우리 모르게 해 주고 있는 것

2. scss

https://create-react-app.dev/docs/adding-a-sass-stylesheet

3. CSS Modules

- [name].module.scss
- 이름 충돌 방지

4. CSS in JS

- styled-components
- emotion
- …

5. 클래스명 기반의 UI 라이브러리

- Tailwind CSS
- bootstrap

SCSS

npm install -D sass

• css 의 확장 문법
• 마치 JSX
• 네스팅을 할 수 있음.

3.CSS Modules

import styles from "./Post.module.scss";

• class 이름 난수로 쓸 수 있어

4. CSS in JS

npm install -D styled-components

---

useEffect

USE Effect 의 장점

구성 요소 마운트 시 데이터 가져오기

• 'useEffect' 후크는 구성 요소가 렌더링된 직후에 호출되며 모든 변경 사항이 DOM에 반영됩니다.

• 이는 데이터 가져오기 작업에 이상적!

• 코드에서 useEffect는 구성요소가 DOM에 마운트될 때 서로 다른 두 엔드포인트(nowPlayingEndpoint 및 topRatedEndpoint)에서 영화 데이터를 가져오는 데 사용됩니다.

• 이렇게 하면 영화 데이터를 가져와 가능한 한 빨리 사용자에게 표시할 수 있습니다.

=> 즉, useEffect 를 사용하면 한번만 마운트시 데이터를 가지고 오니까 계속 상태가 업데이트 되지 않기 위해( 리소스 낭비를 하지 않기 위해) 사용

use State는?

• useState를 사용하는 이유는 계속 렌더링 되면서 변하는 상태를 관리하기 위함

NETFLEX APP.js

import { useEffect, useState } from "react";
import styles from "./App.module.scss";
import Header from "./components/Header";
import MoviesList from "./components/MoviesList";

const TMDB_ACCESS_TOKEN = process.env.REACT_APP_TMDB_ACCESS_TOKEN;
const nowPlayingEndpoint =
  "https://api.themoviedb.org/3/movie/now_playing?language=ko-KR&region=KR&page=1";
const topRatedEndpoint =
  "https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&region=KR&page=1";
const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization: `Bearer ${TMDB_ACCESS_TOKEN}`,
  },
};

const getMovies = async (endpoint) => {
  const response = await fetch(endpoint, options);
  const data = await response.json();
  const movies = data.results;

  return movies;
};
function App() {
  const [movies, setMovies] = useState({ nowPlaying: [], topRated: [] });

  useEffect(() => {
    Promise.all([
      getMovies(nowPlayingEndpoint),
      getMovies(topRatedEndpoint),
    ]).then(([nowPlaying, topRated]) => setMovies({ nowPlaying, topRated }));
  }, []);

  return (
    <div className={styles.app}>
      <Header />

      <main>
        <MoviesList listTitle="현재 상영작" movies={movies.nowPlaying} />
        <MoviesList listTitle="평점이 높은 영화" movies={movies.topRated} />
      </main>
    </div>
  );
}

export default App;

---

Promise.all ?

• Promise.all은 여러 Promise를 동시에 처리하는 데 사용되는 JavaScript의 메서드

• 서로 의존하지 않는 여러 비동기 작업이 있고 모든 작업이 완료된 후에만 일부 작업을 수행하려는 경우 Promise.all은 이러한 작업을 관리하는 효율적인 방법입니다.

• 'App' 구성 요소의 컨텍스트에서 'Promise.all'은 두 가지 영화 데이터 세트를 가져오는 데 사용됩니다. 이제 별도의 엔드포인트에서 영화와 최고 등급 영화를 재생합니다. 코드에서 작동하는 방식은 다음과 같습니다.

Promise.all([
  getMovies(nowPlayingEndpoint),
  getMovies(topRatedEndpoint),
])
.then(([nowPlaying, topRated]) => setMovies({ nowPlaying, topRated }));

위 코드 작동 방식설명:

• Promise.all 함수는 Promise 배열을 인수로 사용합니다. 귀하의 경우 이러한 약속은 getMovies(nowPlayingEndpoint) 및 getMovies(topRatedEndpoint)를 호출한 결과입니다. 이러한 함수는 지정된 엔드포인트에서 영화 데이터를 비동기적으로 가져옵니다.

• 모든 Promise가 해결되기를 기다리는 중: Promise.all은 전달된 모든 Promise가 해결되기를 기다립니다.

• 즉, 모든 비동기 작업(현재 재생 중인 영화 및 최고 평점 영화 가져오기)이 완료될 때까지 기다립니다. Promise 중 하나라도 실패하면(즉, 거부되면) Promise.all은 거부하는 첫 번째 Promise의 이유로 즉시 거부하여 전체 작업이 실패합니다.

결과 처리

• 코드에서 결과는 현재 재생 중인 영화 목록과 최고 평점 영화 목록이라는 두 가지 요소가 포함된 배열입니다.
• 그런 다음 이러한 결과는 .then 메서드에서 사용되어 가져온 영화 데이터로 구성 요소의 상태를 업데이트합니다.

Promise.all을 언제 사용할까??

• 수행해야 하는 여러 개의 독립적인 비동기 작업이 있고 계속 진행하기 전에 모든 작업이 완료될 때까지 기다리고 싶은 경우.

• 작업 순서가 중요하지 않은 경우 'Promise.all'은 작업이 시작된 순서대로 완료된다는 것을 보장하지 않습니다.

• 여러 비동기 작업의 결과를 집계해야 하는 경우.

사용 주의사항!

• 하나의 Promise를 거부하면 전체 작업이 실패하게 되기 때문에 사용시 잠재적인 오류를 처리하기 위해 '.catch' 메서드를 추가하자.