학습 목표

---

Life Cycle (라이프 사이클)

라이프 사이클의 전체 흐름

라이프 사이클의 상세 흐름

라이프 사이클 주의점

그럼으로 useEffect() 사용함

---

직접 해보기

• 터미널에 다음과 같이 입력하여 리액트 환경을 생성해준다.

  npx create-react-app 04.lifecycle

• 이렇게 된거라면 완료

---

---

import "./App.css";
import { useEffect, useState, useRef } from "react";

/* 
  useEffect()
  : 리액트 컴포넌트가 랜더링될 때마다 특정 시점에 
  작업을 처리해주는 리액트 훅 함수

  [특정시점 - LifeCycle]
  1. Mount : 컴포넌트가 화면에 나타나는 시점 
      ex) 최초 1회 호출, 초기화 로직 or API호출
  2. Update : 컴포넌트 내 데이터가 업데이트되는 시점
      ex) props, state에 대한 변화 발생
  3. UnMount : 컴포넌트가 종료되는 시점
      ex) 자원해제, state 초기화 등

  [useEffect() 구조]
  1. useEffect( () => { 실행할 로직 } )
    : 랜더링될 때마다 호출
  2. useEffect( () => { 실행할 로직 }, [state] )
    : []안에 정의한 state를 감시하고 변화가 발생하면 실행
  3. useEffect( () => { 실행할 로직 }, [] )
    : 랜더링시 최초 1회 실행

*/
function App() {
  const [count, setCount] = useState(0);
  const [val, setVal] = useState("");
  const inputRef = useRef();

  const handleClick = () => {
    setCount(count + 1);
  };

  const handleChange = () => {
    setVal(inputRef.current.value);
  };

  // state가 변하면 컴포넌트가 리렌더링되서 아래 콘솔이 실행 된다.
  // 원하는 특정 시점에 로직처리하기에는 적합하지 않기 때문에
  // useEffect()로 처리해야 한다.

  // 랜더링 될때마다 실행
  useEffect(() => {
    console.log("컴포넌트 랜더링!");
  });

  // 처음 마운트 되었을때 한 번만 실행
  useEffect(() => {
    console.log("마운트!");
  }, []);

  // 'count' state가 변경될때마다 실행
  useEffect(() => {
    console.log("count update!");
  }, [count]);

  // 'val' state가 변경될때마다 실행
  useEffect(() => {
    console.log("val update!");
  }, [val]);

  // 하나 이상의 state가 변경될때마다 실행
  useEffect(() => {
    console.log("count : ", count);
    console.log("val : ", val);
  }, [count, val]);

  return (
    <div>
      <h1>useEffect</h1>
      <p>Count 변화 : {count}</p>
      <button onClick={handleClick}>클릭</button>

      <div>
        <input type="text" ref={inputRef} onChange={handleChange} />
        <p>{val}</p>
      </div>
    </div>
  );
}

export default App;

---

실습 참참참 게임 만들기!

• 실습) 참참참 게임
  • Rule
  1. 유저는 공격, 컴퓨터는 수비를 담당함
  2. 유저가 '좌', '정면', '우' 버튼을 클릭했을때,
     유저와 컴퓨터의 선택이 같다면 유저의 승리!
  3. 방향이 다르면 컴퓨터 승리

• 제작시 반영사항
  - 유저와 컴퓨터의 선택, 게임 결과에 대한 state 생성
  - 유저가 '좌', '정면', '우' 중에 하나를 클릭 -> 유저의 state에 업데이트
  - 컴퓨터는 3가지의 방향을 랜덤으로 생성- > 컴퓨터의 state에 업데이트
  - 유저가 선택한 방향의 값으로 state가 변경되면 승패를 판단 -> 결과를 state에 업데이트
  - 게임결과를 화면에 출력
  

const Ex01 = () => {
  let data = ["좌", "정면", "우"];
  const [user, setUser] = useState("");
  const [com, setCom] = useState("");
  const [result, setResult] = useState("");
  const handleClick = (e) => {
    console.log(e.target.innerText);
    setUser(e.target.innerText);
    let pos = Math.floor(Math.random() * 3);
    setCom(data[pos]);
  };
  useEffect(() => {
    if (user === com) {
      setResult("유저의 승리!");
    } else {
      setResult("컴퓨터의 승리!");
    }
  }, [user, com]);
  return (
    <div>
      <h1>참참참 게임</h1>
      <h3>나의 선택: {user}</h3>
      <h3>컴퓨터의 선택: {com}</h3>
      {user && <h3>게임 결과: {result}</h3>}
      {data.map((item, index) => (
        <button key={index} onClick={handleClick}>
          {item}
        </button>
      ))}
    </div>
  );
};
export default Ex01;

---

리액트 공동 api 활용

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20240424

• axios 설치하기
  - 터미널 구동끄기
  - 다음과 같이 입력

  npm install axios

---

ENV

• 노출되면 안되는 정보들을 사용할때 쓸 수 있다.

• 폴더 아래 경로로 .env 파일 생성

• gitignore 파일 다음과 같이 설정
  

• .env 설정

  REACT_APP_MOVIE_API_KEY = "f5eef3421c602c6cb7ea224104795888"
  

• .env
  서버 중단 > 재실행 > 완료

---

실습 axios 사용하기

• 날씨 데이터 받아올 수 있는 홈페이지
  https://openweathermap.org/
  api > api doc > 로그인 > 해당 버튼 클릭
  

import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Card } from "react-bootstrap";
import axios from "axios";

let myKey = "152a46ac954e10f647076cc090f9dac0";

const Weather = () => {
  // 각각의 도시 버튼을 클릭했을때
  // https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${myKey}
  // &units=metric&lang=kr
  // 통해서 도시의 날씨 정보를 가져와 주세요 !!
  // -> axios를 이용 !

  const [cityData, setCityData] = useState("Gwangju"); // 도시
  const [temData, setTemData] = useState(0); // 온도
  const [stateData, setStateData] = useState(0); // 날씨상태

  //useEffect : 맨처음(랜더링 되었을때 -> 사용자에게 보여줬을때), state가 바꿨을때(재랜더링)
  useEffect(() => {
    // Promise : 비동기 통신 정보를 가지고 있는 객체
    // 바로 데이터를 사용할 수 없다!!
    // -> 데이터 파싱(데이터를 전부 받아온뒤 -> 후속처리)
    let data = axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${cityData}&appid=${myKey}&units=metric&lang=kr`
    );
    data.then((res) => {
      setCityData(res.data.name);
      setTemData(res.data.main.temp);
      setStateData(res.data.weather[0].description);
      console.log(res);
    });
  }, [cityData]);

  return (
    <div>
      <Card style={{ width: "18rem" }}>
        <Card.Body>
          <Card.Title>도시 : "{cityData}"</Card.Title>
          <Card.Subtitle>온도 : "{temData}"</Card.Subtitle>
          <Card.Subtitle>날씨상태 : "{stateData}"</Card.Subtitle>
        </Card.Body>
      </Card>

      <Button variant="danger" onClick={() => setCityData("Gwangju")}>
        광주
      </Button>
      <Button variant="warning" onClick={() => setCityData("Seoul")}>
        서울
      </Button>
      <Button variant="success" onClick={() => setCityData("London")}>
        런던
      </Button>
      <Button onClick={() => setCityData("Washington")}>워싱턴</Button>
    </div>
  );
};

export default Weather;

---

04 디테일파일 참조