240816 React useState 좀 더 알아보기

👽 state를 업데이트 할 수 있는 두 가지 방법?!

01. 함수형 업데이트

(1) 함수형 업데이트 🎪

a. 기존 방식

setState(number + 1);

b. 함수형 업데이트 방식

setState(() => {});

( ) 소괄호 안에 수정할 값 대신 함수 를 넣는다.
함수의 인자에서는 현재의 state를 가져올 수 있고,
{ } 중괄호 안에서는 이 값을 변경하는 코드를 작성!

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환
setState((currentNumber)=>{ return currentNumber + 1 });

(2) 뭐가 다른교 ?

일반 업데이트 방식 : setState 3번 명령하던, 100번 명령하던 1번만 실행! 배치(batch)로 처리

함수형 업데이트 방식 : 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행

좀 더 자세히 알아보자 😶

(1) 일반 업데이트 방식으로 onClick안에서 setNumber(number + 1)을 3번 호출
=> number가 1씩 증가

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

(2) 함수형 업데이트 방식으로 동일하게 작동 => **number가 3씩 증가**

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

왜 다르게 동작 하느뇨😵

일반 업데이트 방식은 버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 있는 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리한다.

• 즉 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킨다.
  💡 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행된다.

함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.

• 💡 0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이라는 결과가 우리 눈에 보이는 것이다.

(3) 부모-자식 컴포넌트에서 state를 변경하려면?

props 의 개념처럼, state도 부모가 자식에게 값을 물려줄 수 있다!

부모 👳‍

// src > App.jsx
import { useState } from 'react';

const App = () => {
	const [count, setCount] = useState(0);

	return (
		<div>
			<h1>여기는 부모컴포넌트입니다.</h1>
			<span>현재 카운트 : {count}</span>
			<Child /> {/* 여기에 어떤 props를 넘겨줘야 할까요? */}
		</div>
	)
}

export default App;

자식 👶

// src > components > Child.jsx
const Child = (props) => {
	const handleAddCound = () => {
		// ??
	}

	return <button>Count 1 증가</button>
}

export default Child;

어떻게 넘겨주는데요?

1. count와 setCount를 넘겨주는 방법
2. setCount만 넘겨주는 방법

(1) count와 setCount를 넘겨주는 방법

setCount(prev => prev + 1);

함수형을 이용해서 넘겨주자!