useState의 초기값은 콜백함수로 설정하자

useState 훅은 React 컴포넌트가 렌더링 될 때마다 호출됩니다. useState에 전달하는 초기 상태값 인자는 컴포넌트가 렌더링 될 때마다 평가되기 때문에, 함수 호출 같은 표현식을 사용하면 그 표현식은 매 렌더링 때마다 다시 실행됩니다.

 

 const heavyWork =() =>{
        console.log("엄청무거운작업")
        return ['홍길동','김민수']
    }

    const [names,setNames]= useState(heavyWork());
리랜더링 될때마다 heavyWork()가 실행된다.  따라서 아래처럼 바꿔야한다.