소주제 : 컴포넌트와 생명주기 & open API

1. 컴포넌트 생명주기

1. isChange 라는 state를 만들어 주세요. 초기값은 false로 합니다.
2. [변경], [이동] 2개의 버튼을 만들어 주세요.
3. [변경] 버튼을 누르면 isChange를 true로 변경해 주세요.
4. 이동 버튼을 누르면 '/' 페이지로 이동시켜 주세요.
5. 컴포넌트가 렌더링이 되고난 이후에 경고메시지로 "Rendered!"를 표시해 주세요.
6. 변경 버튼을 클릭하면 경고메시지로 "Changed!!"를 표시해 주세요. ⇒ 단, useEffect의 의존성 배열을 활용해 주세요.
7. 이동 버튼을 클릭하면 경고메시지로 "Bye!!" 를 표시해 주세요. ⇒ 단, 경고메시지는 useEffect에서 작성되어야 합니다.

2. 클래스 컴포넌트를 함수형 컴포넌트로 변경하기

1. 아래의 클래스 컴포넌트를 함수형 컴포넌트로 변경해 보세요.

import Router from "next/router";
import { Component } from "react";

export default class MyComponent extends Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    console.log("컴포넌트가 마운트됐습니다~");
  }

  componentDidUpdate() {
    console.log("컴포넌트가 변경됐습니다~");
  }

  componentWillUnmount() {
    alert("컴포넌트가 제거됩니다~");
  }

  onClickButton = () => {
    this.setState((prev: { count: number }) => ({ count: prev.count + 1 }));
  };

	onClickMove = () => {
		Router.push("/")
	}

  render() {
    console.log("마운트 시작");
    return (
      <>
        <div>카운트: {this.state.count}</div>
				<button onClick={this.onClickCounter}>카운트(+1)</button>
        <button onClick={this.onClickMove}>이동하기</button>
      </>
    );
  }
}

3. axios로 rest기반 open-api 사용하기

1. 아래의 open-api 주소에 접속하여 제공하는 api를 사용하여 화면에 그림을 그려보세요. ⇒ 힌트) useEffect에서 axios와 setState를 사용해야 합니다.

주소: [<https://dog.ceo/dog-api/>](<https://dog.ceo/dog-api/>)