react - useEffect

react를 하다 보면 화면이 처음 보여질 때나 특정 값이 바뀔 때 실행했으면 하는 경우가 있습니다. 이런 경우 useEffect로 해결할 수 있습니다.

관리자 페이지가 있다고 해봅시다. 이 페이지가 처음 보여질 때 관리자가 맞는지 체크할 것입니다.

 

useEffect() 안에 함수를 넣어서 어떤 것을 실행할 지 정할 수 있습니다. 마지막에 []를 넣으면 처음 화면에 보여질 때만 실행합니다. 이 코드는 todo list의 일부입니다. api를 호출해서 해야할 일의 목록을 가져오고 있습니다.

 

그러면 이런 에러가 여러분을 반겨줍니다. 이것은 useEffect에서 async를 사용했을 때 나타나는 현상입니다. 이 경우 아래와 같은 꼼수를 쓸 수 있습니다.

 

만약 일의 목록이 갱신될 때 마다 일의 개수를 출력해주려면 아래와 같이 하면 됩니다. 처음 랜더링 될 때 + [] 안에 있는 값이 변경될 때 마다 호출해 줍니다.

 

처음 랜더링 될 때 + setWorks로 값이 할당될 때 2번 호출됩니다.