[Next.js] 새로고침

 

새로고침하여 fetch로 데이터를 다시 불러오게 하고 싶었다.

 

- 새로고침을 하고 싶은데 클릭한 부분만 새로고침 기능이 작용해야 했다.

- 처음 찾은 것은 이벤트 리스너로 click 이벤트를 컨트롤 하는 것이다.

- 이 경우 useState로 boolean 값을 할당한 뒤 클릭하면 useEffect 안에서 리로드 되면서 false로, 버튼을 클릭하면 true로 변경된다.

- useEffect 안에 return 문으로 false로 변경해주기 때문에 이벤트가 끝나면 false로 고정되었을 것이다.

- 그러나 true로 변경되어도 바로 새로고침이 되지 않았고, 새로고침 기능을 추가하기 위해 useEffect 부분을 무효화하면 화면 어디를 클릭하든 새로고침이 되었다.

- 그래서 useState를 거치지 않고 바로 새로고침을 할 수 있는 기작을 찾아서 넣게 되었다.