본문 바로가기

리액트 기기기초

#6.0 Introduction

  • state가 변화할 때 항상 모든 component는 다시 실행되고, 모든 code들도 다시 실행됨
  • component내부의 몇몇 코드는 처음만 실행되고 다시는 실행되지 않도록 하고 싶다 -> effect
import { render } from "@testing-library/react";
import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev)=> prev+1);
  console.log("render"); //state가 변경될 때마다 (버튼을 클릭할때마다) 계속 rander됨
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div> 
  );
}

export default App;

'리액트 기기기초' 카테고리의 다른 글

#6.2 Deps  (0) 2023.03.10
#6.1 useEffect  (0) 2023.03.10
#5.1 Tour of CRA  (0) 2023.03.08
#5.0 Introduction  (0) 2023.03.08
#4.2 Prop Types  (0) 2023.03.08