(1)useState

state는 업데이트 할 때마다 랜더링이 된다. 즉 한문자를 넣을때 마다 계속해서 update 가 일어난다.

그러면 어떻게 변경해줘야 할까??

heavyWork라는 함수가 첫 화면을 랜더링 할때만 불려지게 한다. 그렇게 하려면 초기값을 넣는 인자에 콜백을 넣어준다.

function App() {
const [names, setNames] = useState(() => {
	return heavyWork();
});

결론적으로 초기값을 가져올때 무거운 작업을 해야된다면 값을 넣어주는게 아니라 callback 형태로 넣어주면 맨처음 랜더링 될때만 함수가 불리게 된다.

정리

1. useState hooks 은 state와 setState를 배열 형태로 리턴해준다.
   1) state 는 현재값
   2) setState 함수로 우리의 state를 변경할 수 있습니다.
   

2. setState를 사용해서 state 를 변경할 때마다 컴포넌트는 다시 랜더링 됩니다.

3. state를 변경할때 새로변경될 state값이 이전 state값과 연관이 되어 있다면 setState값에 인자로 넘겨줄 새로운 state를 리턴하는 인자로(prevState) 넘겨주는 콜백함수를 만들어 주는 것이 좋습니다.
   

4. useState 사용해서 초기값을 받아올때 무거운 일을 한다면 아래와 같이
   useState인자로 callback 함수를 넣어준다면 랜더링이 될때만 실행되게 할 수 있다.

useState(()=> { 
	return heavyWorks();
 })

<참고>
https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=1