TIL 10/17

Rami·2024년 10월 19일

TodayILearn

목록 보기

26/61

5.1 Tour of CRA : module.css

import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

// module.css
.btn {
    color: white;
    background-color: tomato;
}

랜덤 className도 얻을 수 있다.

6.1 useEffect

useState를 사용하면 모든 코드가 업데이트 된다.

불필요한 사용이 될 수 있음-> useEffect로 조절

useEffect(() => {
// 실행할 코드
}, [지켜 볼 코드]);
지켜 볼 코드가 변화하면 실행할 코드가 실행된다.

6.4

기본식

import { useEffect, useState } from "react";

function Hello() {
  return <h1>Hello~</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => {
    setShowing((prev) => !prev);
  };
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "hide" : "show"}</button>
    </div>
  );
}

export default App;

clean up 코드

컴포넌트가 없어질 때 어떤 분석결과를 보내고 싶은 경우 || 컴포넌트가 없어질 때 이벤트리스너를 지우거나 콘솔로 뭔가 보여주고 싶을 때 사용

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("Created :)");
    return () => console.log("Destroyed :(");
  }, []);
  return <h1>Hello!!</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => {
    setShowing((prev) => !prev);
  };
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "hide" : "show"}</button>
    </div>
  );
}

export default App;

방법1

function Hello() {
  useEffect(() => {
    console.log("Created :)");
    return () => console.log("Destroyed :(");
  }, []);
  return <h1>Hello!!</h1>;
}

방법2

function Hello() {
  function byFn() {
    console.log("bye ;(");
  }
  function hiFn() {
    console.log("Hi :)");
    return byFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello!!</h1>;
}

7.3 Movie App part One

then

useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);

async-await

const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };

async-await more shortcut

const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();

    setMovies(json.data.movies);
    setLoading(false);
  };