Yeong Jin

useState 훅은 React 컴포넌트가 렌더링 될 때마다 호출됩니다. useState에 전달하는 초기 상태값 인자는 컴포넌트가 렌더링 될 때마다 평가되기 때문에, 함수 호출 같은 표현식을 사용하면 그 표현식은 매 렌더링 때마다 다시 실행됩니다. const heavyWork =() =>{ console.log("엄청무거운작업") return ['홍길동','김민수'] } const [names,setNames]= useState(heavyWork()); 리랜더링 될때마다 heavyWork()가 실행된다. 따라서 아래처럼 바꿔야한다.

setNames([...names, name]) 위 코드는 names 배열의 현재 상태를 직접 참조하여 업데이트합니다. 이 방법은 일반적으로 문제가 되지 않지만, 이전 상태와 새로운 상태 간의 연관성이 중요한 경우나 복잡한 상태 업데이트 로직에서는 예상치 못한 결과를 초래할 수 있습니다. 이는 React의 비동기 상태 업데이트 때문입니다. setNames((prev) => [...prev, name]) 위 코드는 함수를 인자로 받아 이전 상태를 기반으로 새로운 상태를 계산합니다. 이 방법은 React가 상태 업데이트를 비동기로 처리할 수 있도록 보장하므로, 항상 최신 상태를 기반으로 새로운 상태를 계산할 수 있습니다. 따라서 이전 상태와 새로운 상태 간의 연관성이 중요한 경우에는 이 방법을 추천합니다. ..