6.0 Introduction

state가 변화될때 component는 재렌더링이 되고 모든 코드들이 재실행도 된다
이때 api 호출 등 재렌더링이 되지않아야할 때가있다

App.js

import styled from './App.module.css';
import { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  console.log('render');
  const onClick = () => {
    setCounter((prev) => prev + 1);
  };
  return (
    <div>
      <h1 className={styled.title}>{counter}</h1>
      <button onClick={onClick}> Click</button>
    </div>
  );
}

export default App;

컴포넌트가 렌더링 될때 console.log('render'); 가 실행되며 로그가 찍힌다.
++
로그가 2번 찍히는 이유는
index.js에 React.StrictMode 태그에 감싸져 있어서 그렇다고 한다.
StrictMode는 create-react-app로 설치했을 때 기본적으로 생성되는 태그로,
해당 테그로 감싸져 있는 경우 자손까지 검사한다해서 두 번 실행된다고 합니다.
(노마드코더 댓글에서 참고)
React 공식문서

6.1 useEffect

App.js

import styled from './App.module.css';
import { useEffect, useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);
  console.log('i run all the time.');
  useEffect(() => {
	console.log("call the api..") // 한번만 실행된다
  }, []);
  return (
    <div>
      <h1 className={styled.title}>{counter}</h1>
      <button onClick={onClick}> Click</button>
    </div>
  );
}

export default App;

#0 에서 언급된 컴포넌트가 재렌더링이 되더라도 한번만 실행할수 있게 도와주는것이
useEffect 이다
useEffect는 화면을 그리고 실행되는데 라이플 사이클과 관련이 있는것 같지만 이 챕터에서는 나오지않았다. 따로 찾아봐야징

6.2 Deps

import styled from './App.module.css';
import { useEffect, useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKetword] = useState('');
  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKetword(event.target.value);
  useEffect(() => {
    console.log('i run only once'); // 한번만 실행된다
  }, []);
  useEffect(() => {
    if (keyword !== '' && keyword.length > 5) {
      console.log('I run when keyword', keyword);
    }
  }, [keyword]); // watch 기능 처럼 keyword의 변화만 감지하여 렌더링이 이뤄지더라도 변화된값이 없으면 실행되지않는다.
  useEffect(() => {
      console.log('I run when counter', counter);
  }, [counter]); // watch 기능 처럼 counter의 변화만 감지하여 렌더링이 이뤄지더라도 변화된값이 없으면 실행되지않는다.
  useEffect(() => {
      console.log('I run when keyword & counter', counter, keyword);
  }, [keyword,counter]); // keyword,counter 둘 중 하나만 변화되도 실행한다
  return (
    <div>
      <input
        type='text'
        placeholder='Search here..'
        onChange={onChange}
        value={keyword}
      ></input>
      <h1 className={styled.title}>{counter}</h1>
      <button onClick={onClick}> Click</button>
    </div>
  );
}

export default App;

6.3 Recap

useEffect 2개의 인자를 가지는 함수이다.
첫번재는 우리가 실행시키고 싶은코드,
두번째는 dependencies이다, 이때 dependencies란 react.js 가 지켜보아야 하는것을 의미하며 그것들이 변화할때 React.js가 코드를 실행시킨다

6.4 Cleanup

import styled from './App.module.css';
import { useEffect, useState } from 'react';
function Hello() {
  useEffect(function () {
    console.log('hi');
    return function () {
      console.log('bye');
    };
  }, []);
  useEffect(() => {
    console.log('hi');
    return () => { // 라이프 사이클 Destroyed -> 컴포넌트가 사라질때 실행된다.
      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;