Loading...
JavaScript, React, TypeScript 등 학습하며 정리
컨트롤드 인풋 + 목록 추가, 무거운 초기값은 lazy initializer로 1회만
useState
인풋 상태 업데이트현재 입력: 홍길동, 김민수
lazy Initializer
useState(() => ...)초기 한 번만 실행된 무거운 계산 결과를 캐싱. 재계산은 버튼으로만 실행
( 대략적으로 3 ~ 5ms 이상일 경우 무거운 계산 결과로 간주 )
클릭하여 복사
1const [text, setText] = useState('');
2const [names, setNames] = useState(['홍길동']);
3const [heavy, setHeavy] = useState(() => heavyInit()); // 최초 렌더 1회만 실행
4
5const add = () => {
6 if (!text.trim()) return;
7 setNames((prev) => [text, ...prev]);
8 setText('');
9};
10
11return (
12 <>
13 <input value={text} onChange={(e) => setText(e.target.value)} />
14 <button onClick={add}>추가</button>
15 <p>{names.join(', ')}</p>
16 <button onClick={() => setHeavy(heavyInit())}>무거운 연산 다시 실행</button>
17 </>
18);