✅ useEffect 안에서 직접 async 함수 만들면 안 되는 이유 깔끔한 비동기 패턴은 따로 있다 많이들 이렇게 쓴다:useEffect(async () => { const res = await fetchData(); setData(res); }, []); 이 코드는 문법적으로는 가능하지만 비추천된다. useEffect는 동기 함수여야 하며, async 함수는 암묵적으로 Promise를 반환하기 때문에 React 내부에서 예상치 못한 동작이 발생할 수 있다.✅ 안전한 async 패턴useEffect(() => …
✅ 초기 렌더에서만 실행돼야 할 코드는 이렇게 막는다 useEffect 의존성 없이 쓰면 위험하다 API 호출이나 특정 로직을 초기 1회만 실행하고 싶을 때:useEffect(() => { fetchData(); }, []); 문제는 개발 중 Strict Mode가 켜져 있으면 초기 렌더가 두 번 실행된다.✅ 해결: 플래그 ref로 한 번만 실행 제어const didRun = useRef(false); useEffect(() => { if (didRun.current) return; fetchData(); …
✅ JSX 안에서 map 쓸 때 key만 맞춰도 안심하긴 이르다 렌더링 최적화와 key의 진짜 역할 보통 리스트 렌더링은 이렇게 한다:{items.map((item) => ( <Item key={item.id} data={item} /> ))} 대부분 여기서 멈추지만, key의 목적은 고유식별자 + 위치 추적용이다. 값이 아닌 인덱스를 key로 쓰면 문제가 생길 수 있다:{items.map((item, i) => ( <Item key={i} data={item} /> ))} ❌ 문제 발생 상황…
✅ 조건부 렌더링에 &&만 쓰면 언젠가 터진다 falsy 값 출력 버그, 이 패턴으로 막자 보통 이렇게 조건부 렌더링을 한다:{items.length && <ItemList items={items} />} 하지만 items.length가 0이면, React는 0을 그대로 렌더링해버린다 → 화면에 이상한 숫자 0이 뜨는 현상 발생✅ 해결: 명확한 비교 또는 삼항 연산자 사용{items.length > 0 && <ItemList items={items} />} // …
✅ setState 연속 호출이 안 먹힐 때 의외의 해결법 함수형 업데이트 패턴이 답이다 상태를 연속으로 두 번 바꾸면 이런 문제가 생긴다:setCount(count + 1); setCount(count + 1); // 결국 한 번만 증가함 이유는 간단하다. React는 배치 처리(batch) 때문에 같은 count 값을 기준으로 두 번 업데이트한다.✅ 해결: 함수형 업데이트 쓰기setCount(prev => prev + 1); setCount(prev => prev + 1); // 이제 2번 증가함 prev는 항상 최신…
