useState

State란?

• 컴포넌트가 가질 수 있는 상태

---

useState 선언

const [state, setState] = useState(초기값);

여기서 state 초기값을 저장하고
setState는 state의 값을 변경해주는 역할을 한다

setState 함수를 사용해서 state를 변경하면 해당 컴포넌트는 re-rendering 된다

---

useState 간단한 예제

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
  	setCount(count + 1);
  }

  return (
    <div>
      <p>클릭횟수 : {count}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

위 예제에서는 count에 useState를 사용하여 초기값을 0으로 설정하고
button을 클릭할 때 마다 handleClick 함수를 호출하여
setCount 함수를 통해 count의 값을 1씩 증가시키는 기능을 구현하였다

---

렌더링 문제

위에서 setState 함수로 값을 변경시킬 때마다 re-rendering을 한다고 헀다

re-rendering이 발생하면 함수가 다시 호출되기 때문에 무거운 작업을 하는 함수가 있으면 state가 변경될 때마다 무거운 작업이 실행되는 문제가 발생한다

무거운 작업을 하는 함수가 제일 처음 rendering 될 때 한번만 호출되도록 하는 것이 목표이다

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
 const handleHavyWork = () => {
 	console.log("엄청 무거운 작업을 하는 함수");
 }
 
  const handleClick = () => {
  	setCount(count + 1);
  }

  return (
    <div>
      <p>클릭횟수 : {count}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );

handleHavyWork 라는 무거운 작업을 실행하는 함수가 있다고 가정을 하자

이 함수를 제일 처음 렌더링 될 때만 호출되도록 하고 싶으면
state 초기값으로 () => {} 콜백함수를 인자로 넣어주면 된다.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(() => {
  	return handleHavyWork;
  });
  
 const handleHavyWork = () => {
 	console.log("엄청 무거운 작업을 하는 함수");
 }
 
  const handleClick = () => {
  	setCount(count + 1);
  }

  return (
    <div>
      <p>클릭횟수 : {count}</p>
      <button onClick={handleClick}>Click</button>
    </div>
  );

---

다음편 : useEffect