생명주기

Promise

• fetch 함수는 promise 의 response 를 리턴함
• promise : 미래 데이터를 약속하는 것

대부분의 앱은 생명주기를 가지고 있다

한번만 실행하게 해준다

생성자에 담아서 한번만 실행되도록 해줄 것이야

(또는 업데이트 할지말지 결정해서 안하도록 해주거나..?)

(React) React의 생명 주기(Life Cycle) - 라이프사이클

import React from "react";
import { useEffect, useState } from "react";

// 리액트 클래스 컴포넌트 기반 (X)
// 리액트 hooks() => 함수형 기반 (O) => useXX 함수를 사용 가능!!!!!!
const HomePage = () => {
  // fetch 를 기다리게 할거야 -> 동기적으로 진행되게

  const [user, setUser] = useState("홍길동");

  // 생성자 (조건이 필요한 생성자)
  // 생성자는 한번만 실행(생성) 되니까
  // 앱이 실행될때 실행됨
  // 의존하고 있는 데이터가 변경될 때만 실행됨
  useEffect(() => {
    fetch("<http://localhost:8080/user/1>") // 메모리가 데이터 받아옴 cpu는 내려감
      .then((res) => res.json()) // then 에는 method 가 들어와야됨 -> 문자열로 들어온 데이터를 자바스크립트 객체로 파싱
      .then((res) => {
        // 파싱이 끝난 값이 여기 들어옴
        console.log(res);
        setUser(res);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []); // 의존하는 데이터가 변경될때만 생성자를 실행시킬 수 있음-> 따라서 비워두면 한번만 실행하겠다는 의미
  // React.DependencyList -> 검색 시 활용하기 좋음!!
  return (
    <div>
      <h1>Home Page</h1>
      <h3>접속한 유저 이름 : {user.username}</h3>
      <hr />
    </div>
  );
};

export default HomePage;

useEffect

: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook