[Kossie Coder] useEffect

// App.js

import React, { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [lami, setLami] = useState(0);
  useEffect(() => {
    console.log('count', count, 'lami', lami);
  }, [count]);

  useEffect(() => {
    console.log('first rendering');
  }, []);

  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div className="App">
      <h1>Lami</h1>
      <button onClick={increment}>Click</button>
      <button onClick={() => setLami(lami + 1)}>Click1</button>
    </div>
  );
}

export default App;

click 눌렀을 때

click1 눌렀을 때

• useEffect에서 두 번째 인자로 쓴 배열에 count만 있었기 때문에 count의 변화가 있을 때만 화면에 그림(렌더링함)

 

다시 click 누르면

• click1을 누를 때 화면에 그리지는 않지만 카운트 +1 되었기 때문에, click을 누르면 그 값이 그제서야 그려짐

 

두 번째 useEffect

// App.js 중 일부

useEffect(() => {
    console.log('first rendering');
  }, []);

• 두 번째 인자로 빈 배열이 있기 때문에 맨 처음에만 렌더링 하고, 재렌더링을 할 때 그리지 않음

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */