Je개발 일지

state 를 잘 구조화하면 컴포넌트가 수정과 디버깅에 용이해진다. 1. state 구조화 원칙 컴포넌트를 작성할 때는 얼마나 많은 state 변수를 사용할지, 데이터 모양은 어떻게 해야할지를 선택해야 한다. 관련 state 를 그룹화 한다. 항상 두 개 이상의 state 변수를 동시에 업데이트한다면 하나의 state 로 합치는 것이 좋다 state 모순을 피하라 여러 state 조각이 서 모순되거나 불일치할 방식으로 state 를 구성해서는 안 된다. 불필요한 state 를 피하라 렌더링 중에 컴포넌트의 props 나 기존 state 변수에서 일부 정보를 계산할 수 있다면 해당 정보를 해당 컴포넌트의 state 에 넣지 말아야 한다. state 중복을 피하라 동일 데이터가 여러 state 변수 간에 또..

1. state 업데이트 일괄 처리 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ) } 이전 챕터에서 이 코드에서 onClick 의 결과로 h1 에 보여질 number 값은 +1 된 값임을 확인했다. 여기에서 한 가지 더 논의 될 사항이 존재한다 React 는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다 이 원칙에 의거해 리렌더링은 모든 setNu..