[React] ReactJS로 영화 웹 서비스 만들기_(5)

강의 내용 요약
#5.0 ~ #6.4

 

○ create-react-app

• 개발 서버에 접근한다든가,
  자동으로 새로고침을 시켜준다든가
  즉각적으로 어플리케이션 안에 CSS를 포함시켜 준다든가 ...
• ReactJS 어플리케이션을 만듧에 있어 훨씬 간편해짐!

   ** 나는 이미 세팅이 되어있는 상태라 create-react-app을 통해 프로젝트를 생성하는 방법은
       아래 링크를 참고하면 된다.

https://coding-hana.tistory.com/8

[React] (1)프로젝트 생성

 

 

- Button.module.css

.title {
  color: white;
  background-color: tomato;
}

• create-react-app은 우리가 작성한 css코드를 javascript 오브젝트로 변환시켜준다.

- Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

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

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

• create-react-app으로 변환된 javascript 오브젝트는 title을 안에 갖고 있다.

- App.js

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

function App() {
  return (
    <div className="App">
      <h1 className={styles.title}>Welcome back!</h1>
      <Button text={"Continue"} />
    </div>
  );
}

export default App;

• Button.js와 동일하게 className을 'title'로 한다면 어떻게 될까?

 

실행해서 console을 보면 확인할 수 있다.

같은 className이라고 해도

HTML 내에서는 랜덤방식으로 생성된다.

 

---

import { useEffect, useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  console.log("I run all the time");
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

• button을 클릭해서 counter를, input에 값을 입력해서 keyword를 변경할 수 있다.
  → 이때 모든 code들은 항상 다시 실행된다!
  → 왜? React는 항상 새로운 데이터가 들어올 때마다 UI를 refresh하니까~!
• 예를 들어, API를 통해 data를 가져왔는데, 그 큰 data를 state가 변경될 때마다 가져온다면??
• 가끔은 괜찮을 수 있지만 예시와 같은 경우에는 처음 딱 한번만 실행되고, 다시는 실행되지 않도록 하는게 좋겠지.

   ⇒ reactJS는 언제 코드를 실행할지 안할지 결정할 tool을 제공해줘
       그게 바로 useEffect다!!

   ⇒ state가 변할 때마다 매번 실행되는 onClick과는 반대로 useEffect는 한 번만 실행된다!

---

○ useEffect

   ※ useEffect : component가 처음 render할 때 실행되고 다시는 실행되지 않을 function

                       → 코드가 딱 한번만 실행될 수 있도록 보호해준다.

                       → 두개의 argument를 가지는 function

                            - 실행하려는 코드

                            - dependencies (reactJS가 지켜보아야 하는 것들)

 

 

   (1) 아무것도 지켜보지 않기

useEffect(() => {
	console.log("I run only once.");
}, []);

• dependencies에 공백으로 두게 되면 무조건 단 한번 실행된다.
  → 처음 render될 때 딱 한 번 실행된다.
  → state가 변경되어도 실행되지 않는다.

 

   (2) 한 개의 아이템만 지켜보기

useEffect(() => {
	console.log("I run when 'keyword' changes");
}, [keyword]);

useEffect(() => {
	console.log("I run when 'counter' changes");
}, [counter]);

• dependencies에 state 하나만 담고 있는 경우,
  해당 state가 변경될 때마다 실행된다.

 

   (3) 여러 개 중 하나가 실행될 때 코드 실행하기

useEffect(() => {
	console.log("I run when keyword && counter change");
}, [keyword, counter]);

• dependencies에 state 여러 개를 담고 있는 경우,
  그 중 하나의 state가 변경될 때마다 실행된다.

 

* cleanup function

function Hello() {
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);
  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;

• 실행해보면 Hello 컴포넌트를 show / hide 할 때마다 console에 'hi :)' / 'bye :('가 찍히고 있어
• Hello 컴포넌트 내에 useEffect를 보면 dependencies는 [ ] 공백이다.
  근데 어떻게 계속 useEffect가 실행되는거지?
  ⇒ Hello 컴포넌트를 hide할 때는 컴포넌트를 화면에서 지워준다.
      (즉, create-destroy의 반복인 거야!!)
• destroy될 때는 어떻게 코드를 실행하는거지?
  destroy될 때는 reactJS는 show할 때 return한 function을 실행한다.