[ReactJS로 영화 웹 서비스 만들기] Section 4

npx create-react-app my-app
cd my-app
npm start

create-react-app을 이용하면 자동 재실행이라는 장점이 있다

 

npm i prop-types

PropTypes를 checking 하기 위해 PropTypes install

 

create-react-app은 CSS코드를 javascript 오브젝트로 변환시켜 준다

CSS modules -> Button.module.css

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

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

create-react-app은 무작위적인 랜덤 class를 갖는다

동일한 class 이름을 다른 파일 내에서도 사용 가능

 

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("render");
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

↑ 이 상태에서는 state가 변할 때마다 매번 render이 실행된다

component가 처음 render될 때만 코드가 실행되길 원한다면

ex) API 호출

useEffect 사용!

useEffect의 첫 번째 인자는 딱 한 번만 실행하고 싶은 코드

console.log("i run all the time");
  const iRunOnlyOnce = () => {
    console.log("i run only once");
  };
  useEffect(iRunOnlyOnce, []);

useEffect(() => {
    console.log("CALL THE API...");
  }, []);

 

useEffect function은 코드가 딱 한번만 실행될 수 있도록 보호해 준다

 

코드의 특정 부분만이 변화했을 때만 원하는 코드들을 실행할 수 있는 방법

useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);

[] 안에 keyword라고 써준 것은 keyword가 변화할 때 코드를 실행할 거라고 알려주는 것

useEffect의 두 번째 인자인 dependencies는 react.js가 지켜보아야 하는 것들이고 그것들이 변화할 때 react.js가 코드를 실행시킨다

그냥 [ ]만 적어주면 지켜볼 대상이 없기 때문에 코드가 한 번만 실행될 거라는 것을 의미한다

 

자바스크립트 쓸 때 중괄호 쓰기!

function Hello() {
  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;

 

 

state가 바뀔 때, 즉 showing이 변경될 때 모든 component가 함께 바뀐다

component를 없애버리거나 생성

component가 없어질 때 실행될 function 생성

function Hello() {
  useEffect(() => {
    console.log("created :)");
    return () => console.log("destryed :(");
  }, []);
  return <h1>Hello</h1>;
}

 

여기서 return () => console.log("destroyed :("); 부분이 Cleanup function 

컴포넌트가 파괴될 때도 함수를 실행하고 싶으면 useEffect 함수가 새로운 함수를 return 해야 한다

deps가 비어있으면 자동으로 컴포넌트가 파괴될 때 cleanup 함수가 실행되는데 그 과정이 리렌더링으로 useEffect 함수가 실행되고 클린업하면서 이전에 있던 이펙트(console.log("created :)")가 삭제되고 새로운 이펙트 함수인 return 함수가 실행되기 때문

useEffect(function() {
    console.log("created :)");
    return function() { console.log("destryed :("); }
  }, []);

이 코드도 같은 기능이지만 이렇게 거의 안 쓴다