[노마드코더] #3 CRA, Effects

Create React App

create-react-app은 React에 개발 서버 접근, 자동 새로고침 및 다양한 사전 설정을 제공

node.js 설치 및 create-react-app 생성 -> src에서 index.js, App.js만 남기고 삭제, 내용 정리

 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

마찬가지로 index.js에서 index.html의 root에 App 컴포넌트를 렌더링하고 있다

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

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

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

export default Button;

‘npm i prop-types’설치 후 props의 type을 제한할 수 있다

module.css는 CRA 고유 기능으로 className을 활용해 컴포넌트만 스타일링한다

 

Effects

함수는 첫 호출 이후 state가 변경될 때마다 리렌더링되는데,,

state가 변경되어도 특정 부분(API호출 등)은 리렌더링되지 않게 하려면 useEffect를 활용한다

import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((current) => current + 1);

  console.log('i run all the time'); /*state가 변할 때마다 실행*/
  useEffect( () => {
    console.log('call the api'); /*처음 1번만 실행*/
  }, []);

  return (
    <div>
      <h1>count: {counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

두번째 인자가 없다면 useEffect 안의 함수는 첫 렌더링에 딱 한 번만 실행된다

 

특정 state가 변했을 때, 원하는 코드들만 실행할 수 있도록 useEffect의 두번째 인자를 사용해보자

import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setCounter((current) => current + 1);
  const onChange = (event) => setKeyword(event.target.value);

  console.log('i run all the time'); /*아무 state가 변할 때마다 실행*/
  useEffect( () => {
    console.log('call the api'); /*처음 1번만 실행*/
  }, []);
  useEffect( () => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]); /*keyword가 변화할 때만 실행*/
  useEffect(() => {
    console.log("I run when keyword & counter change");
  }, [keyword, counter]); /*keyword나 counter가 변화할 때만 실행*/

  return (
    <div>
      <input 
        value={keyword} 
        onChange={onChange} 
        type="text" 
        placeholder="Search here" 
      />
      <h1>count: {counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

컴포넌트 재실행에 대한 제어 및 언제 코드를 실행할지 선택할 수 있다!

import { useState, useEffect } from "react";

function Hello() {
  /*function byFn() {
    console.log("bye :(");
  }
  function hiFn() {
    console.log("hi :)");
    return byFn;
  }
  useEffect(hiFn, []); 원리*/

  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []); /*return 이후 쓰면 컴포넌트가 사라질 때 실행*/
  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;

useEffect의 return 이후에 쓰면 컴포넌트가 사라질 때 실행된다!

 

본 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기'를 바탕으로 작성되었습니다