#8 작업일지 / interval함수 리팩토링, 게시글 상세페이지 통신 로직 작성

1. 타이머를 카운트 하는 함수가 00:00:00이 되면 실행이 종료되어야 하는데, 마이너스까지 내려가고 있다. 

조건을 입력하면 콜백함수를 delay시간동안 반복 실행시켜주는 useInterval 훅을 리팩토링함. 의존성 배열에 shouldContinue를 넣어줌으로써 shouldContinue의 상태가 변하거나 컴포넌트가 언마운트 될 때 클린업하는 함수를 실행한다. useEffect에서 리턴하는 함수는 컴포넌트 언마운트시에 실행되는 cleanUp함수이다. (공식문서 참고)

shouldContinue 라는 것을 의존하기 위해서는 상태값으로 저장해서 관리할 필요가 있었다. 특정 조건이 되면 상태가 변하도록 하고, 이에 따라 interval 함수가 종료되어야 하기 때문이다. 그래서 아래와 같이 useGetTimeRemain 함수에서도(useInterval로 시간을 실시간으로 업데이트 하고 이에 따라 남은 시간을 계산하여 리턴하는 함수) useEffect를 사용해 realTime을 주시하다가 특정 시점이 되었을 때 shouldContinue 조건을 false로 변경해주었다.

그래서 이제 시간이 00:00:00이 되면 마이너스로 넘어가는게 아니고 잘 종료된 상태로 유지가 된다.

 

그런데 이제 문제는, 컴포넌트가 마운트 되었을 때와 언마운트 되었을 때 바로 실행이 되고, 종료가 되는게 아니라 한 번 새로고침을 해줘야만 제대로 동작한다는 것이다... 뭔가 시점을 파악해서 함수를 실행시키는게 잘 되지 않는 것 같은데 다시 들여다 봐야겠음.

 

2. react-query를 적용해 서버로부터 데이터를 가져와봤다. 공식 문서에 있던 예제코드를 참고해 아래와 같이 요청 로직을 작성. data를 분해해서 렌더링에 활용하려고 하니, undefined 이거나 null인 경우 TypeError가 발생했다. 그래서 data가 유효한 경우에만 분해할 수 있도록 OR 연산자를 사용했다.

useQuery의 두 번째 인자로는 함수를 리턴해주어야 한다. 그냥 아래와 같이 넘겨주었더니 형식이 맞지 않는다는 에러를 출력했다.

 

ㅇapi 요청 코드는 api 폴더에서 객체 메서드 형태로 관리하여 추상화 하고자 하였음. 아래와 같이 작성해두면 실제로 사용할 때는 위 코드에서처럼 productDetailAPI.get 이렇게 접근할 수 있어서 어떤 요청을 보내고 있는지 조금 더 명시적으로 확인 가능하다. 

axios도 이번에는 팀원들과 상의하여 baseURL과 headers를 정의하여 인스턴스를 만들어주었다. 굿~