[TIL] 내일배움캠프 React 과정 2024.05.20

오늘의 한 일

• 알고리즘 심화 수업
  • 과제: Fixed Array (private)
• React 숙련 주차 강의
• 챌린지 반 수업
  • Routing

오늘의 배운점

useState의 특징: State Batch Update

• state batch update란?

  • 리액트의 이벤트 핸들러를 사용하여 여러 번의 setState를 호출할 떄 이를 하나의 업데이트로 일괄 처리하여 리렌더링이 한 번만 발생하도록 하는 것이다.
  • state 값의 업데이트는 16ms 단위로 이루어진다.

• 예시

  import { useState, useEffect } from "react";
  
   export default function App() {
   	const [num, setNum] = useState(0);
  
  	const handlePlus = () => {
     		setNum(num + 1);
     		setNum(num + 1);
     		setNum(num + 1);
   	};
  	return (
     	<div>
       	<p>{num}</p>
      	<button onClick={handlePlus}>plus</button>
    	 </div>
   	);
  }

• num + 1이 3번 반복되므로 3이 증가할 것 같지만 1이 증가한다.

  import { useState, useEffect } from "react";
  
   export default function App() {
   	const [num, setNum] = useState(0);
  
  	const handlePlus = () => {
     		setCount((prev) => prev + 1);
  		setCount((prev) => prev + 1);
  		setCount((prev) => prev + 1);
   	};
   	return (
     	<div>
       	<p>{num}</p>
       	<button onClick={handlePlus}>plus</button>
     	</div>
   	);
  }

  • 위 처럼 함수형 업데이트 방식을 사용하여 문제를 해결할 수 있다.

컴포넌트 분리의 이유

• 재사용성
  • 컴포넌트가 반복되면 분리한다.
• 응집성
  • 코드 내용이 길어지면 분리한다.
• 불필요한 리렌더링 방지
  • state가 꼭 필요한 곳에 있도록 분리한다.

Layout을 사용하는 이유

• 공통된 UI
• 공통된 비즈니스 로직
  • ex.로그인 했는지 제일 처음 확인하는 작업

Layout의 불필요한 mount, unmount를 없애자!

• 2024.05.21에 복습하면서 적어보자!

오늘의 회고