React 실행, style 지정, State 실행 설정(useEffect, Cleanup Func)

📌ReactApp 실행

Node.js

node -v
npx

제대로 설치되었는지 확인

npx create-react-app [폴더명]
code [폴더명]

새로 프로젝트 생성 및 실행

npm start

npm 오류 발생→ terminal을 cmd로 바꿔준 후, 윈도우 환경 변수 설정 후 재부팅해주어 해결

npm i prop-types

prop-types 설치
 

📌Style 지정

module.css 형태의 파일을 생성하여 원하는 style로 css를 만들어준 후에 import해준다. (Ex. App.module.css)

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

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

export default App;

이렇게 import 해온 style에서 원하는 스타일을 className = { style.title }처럼 클래스명으로 지정해주면, 자동으로 클래스명이 랜덤으로 생성된다.
매번 자동으로 랜덤 클래스명이 부여되기 때문에, 클래스명을 기억해야 하는 번거로움이 줄어들게 되고,
무엇보다 각 컴포넌트마다 독립적으로 적용이 가능해진다.
 

📌useEffect

useEffect란, 특정 코드가 첫 번째 렌더링에서만 작동되도록 설정하는 방법이다.

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);
  console.log("매 번 실행됨");
  const iRunOnlyOnce = () => console.log("한 번만 실행됨");
  useEffect(iRunOnlyOnce, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Continue</button>
    </div>
  );
}

export default App;

이렇게 useEffect를 사용하면 한 번만 사용할 함수를 지정할 수 있다.
useEffect에는 두 개의 인자가 들어가는데, 첫 번째 인자에는 한 번만 실행될 함수가 들어가고, 두 번째 인자에는 state를 넣어주면, 해당 state의 변화에 따라 함수가 재실행된다.

useEffect(() => console.log("counter 값 변화"), [counter]);

따라서, 위처럼 counter를 담아 넣어주면, counter의 값이 변동될 때마다 해당 함수가 재실행되는 것이다.
 

📌CleanUp Function

function Hello() {
  useEffect(() => {
    console.log("created :)");
    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>
  );
}

useEffect에서 [ dependency ]에 아무것도 없다면( ex) [ ] ) 첫 렌더링일 경우에만 실행된다. 이 곳에 state를 입력해두면, state가 변화할 때마다 렌더링된다. 그러면 return () => console.log("bye :(");는 언제 실행될까?
return은 컴포넌트 unmount될 때 즉, 컴포넌트가 화면에서 사라질 때 실행된다.
이처럼 useEffect는 화면에서 컴포넌트가 드러날 때 (mount) 시에 확인할 수 있고,
CleanUp Functon은 화면에서 컴포넌트가 사라질 때 (unmount) 시에 확인할 수 있다.

 
 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders