[Nomad] ReactJS로 영화 웹 서비스 만들기 3

노마드코더 강의 3일차.

심심해서 만들어보는 React JS 강의 수강

 - ReactJS로 영화 웹 서비스 만들기

  1. 준비물

     > react app 설치 (React JS, React-Dom, Babel)

     > propTypes : npm i prop-types 

 

react app 설치 순서
1. node js 설치 (nodejs.org 에서 LTS 버전 설치)
2. node 버전 확인 (node -v)
3. react-app 설치 (npm install create-react-app)
4. 사용할 Application 폴더 구조 생성 (npx create-react-app react-for-beginners)
5. cd react-for-beginners
6. npm start
7. 로컬서버가 실행되고, http://localhost:3000/로 이동하여 React 로고가 나오면 설정 완료!
8. 특별히 지정하지 않으면 react-app, myApp의 경우 react-app을 설치한 폴더가 root로 설정이 된다
* vscode에서 terminal이 동작하지 않는다면 기본 설정이 Command Prompt로 되어있는지 확인하자
   - 설정방법 : 터미널 -> 터미널 우측 상단 ∨ 클릭 -> 기본 프로필 선택 -> Command Prompt > vs code 재시작

 

react-app 최초 설정 (index.js)

react-app 최초 설정 (App.js)

 

 

* 각 모듈별 css 설정

1. index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

2. App.js

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

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

export default App;

 

3. App.module.css

.tilte {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 18px;
}

 

4. Button.js

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

function Button({ text }) {
  //Button 모듈을 사용할 때만 css 로딩하고, 내가 원하는 Button에만 관련 Style을 적용할 수 있다.
  //여기서 정의한 className은 렌더링 시 무작위적인 랜덤 class name을 가지게 된다!!
  return <button className={styles.btn}>{text}</button>;
}

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

export default Button;

 

5. Button.module.css

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

 

** 간단한 React app 구조 만들어보기 완료. 

*effect :  특정 component가 맨 처음 render 될 때만 실행하고, 다른 때는 동작하지 않도록 실행 제어하는 방법

1. App.js (effect 기초)

import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } 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);
  useEffect(() => {
    console.log("i run only one"); //처음 render될 때만 실행되는 코드 (1회만 호출되는 로직)
  }, []); //watch대상이 없으므로 최초 1번만 실행됨
  useEffect(() => {
    console.log("i run when 'keyword' : ", keyword, " changes");
  }, [keyword]); //keyword가 변할 때만 useEffect 실행 (watch 대상)
  useEffect(() => {
    console.log("i run when 'counter' : ", counter, " changes");
  }, [counter]);
  useEffect(() => {
    console.log("i run when keyword & counter changes");
  }, [keyword, counter]); //한개 이상의 변수에 대해서 watch 설정이 가능하다
  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;

 

2. App.js (effect, destroy 사용)

import { useState, useEffect } from "react";

function Hello() {
  //useEffect 사용 Case1 : useEffect에서 호출하는 로직을 각각 분리해서 선언
  function byeFn() {
    console.log("1 bye :(");
  }
  function hiFn() {
    console.log("1 hi :)");
    return byeFn; //component가 destoryed 될 때 실행하고 싶은 function을 리턴
  }
  useEffect(hiFn, []);

  //**useEffect 사용 Case2 : useEffect에서 () => 사용해서 선언 (제일 자주 사용하는 표현식)
  useEffect(() => {
    console.log("2 hi :)");
    return () => console.log("2 bye :(");
  }, []);

  //useEffect 사용 Case3 : useEffect에서 호출하는 로직을 function으로 선언해서 사용
  useEffect(function () {
    console.log("3 hi :)");
    return function () {
      console.log("3 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;

 

3. todoList

import { useState } from "react";

function App() {
  const [toDo, setTodo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setTodo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]); //...의 역할은 해당 Array의 elements를 리턴한다 (Array 형태가 아닌 enum 나열로 리턴됨)
    setTodo(""); //값 초기화 방법
  };
  return (
    <div>
      <h1>My To Dos {toDos.length}</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your todo..."
        ></input>
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;