3/24 일일정리 React Hooks 적용하기
주어진 간단한 React로 만들어진 블로그 코드를 완성시키고,
custom hook을 만들어서 리팩토링 해보는 실습을 진행하였다.
이번 실습에는 json server 라이브러리를 사용하였는데, json파일을 이용하여 REST API를 구축해주는 라이브러리이다. 서버를 실행시키고 해당 포트로 들어가면 다음과 같은 화면이 나온다. 해당 서버는 오른쪽의 json파일을 기반으로 만들어졌다.
useParams
처음 작업은 react router의 useParams hook을 사용하는 것이었다. 각각의 블로그 글은 router Link로 다음과 같이 작성되어 있다.
콜론(:) 뒷부분이 parameter로 들어오는데, useParams hook을 사용하면 이 parameter를 받아올 수 있다.
BlogDetails 컴포넌트에서 각각의 블로그 글을 받아오기 위해 url에 각 블로그 글에 맞는 parameter id를 붙여서 GET 요청을 보내야 한다.
useNavigate
다음으로는 react router의 useNavigate hook을 사용해보았다. useNavigate은 함수를 반환하는데, 반환되는 함수에 문자열로 path를 넣어주면 해당 path의 route로 이동한다.
블로그 글을 지우거나, 블로그 글을 생성하고 메인 페이지로 이동하기 위해서 useNavigate 사용한다.
handleLikeClick
블로그 글 하단의 하트버튼을 누르면 해당 블로그 글의 likes가 1증가하고, 하트가 색깔이 변경되도록 함수를 만들어보았다.
먼저, 하트 버튼을 클릭하면 클릭 상태를 변경하고(isLike) 해당 글 데이터 객체의 likes 프로퍼티를 변경해주기 위해서 새로운 객체를 만들어준다. 하트버튼이 클릭되어있으면 1을 더해주고 그렇지 않으면 원래있던 값을 유지하도록 해줬다.
그리고 서버에 있는 data를 변경해주기 위해 PUT 메서드로 해당 객체와 함께 요청을 보낸다.
요청을 보낼 때 body는 json파일 형태로 변환하여 작성하고, 헤더는 json 파일임을 나타내고, utf-8로 인코딩하도록 적용해줬다.
하트의 색깔 변경은 삼항연산자로 조건부 렌더링 해준다.
적용이 잘 되는것을 볼 수 있다.
* 라이브 세션에서는 PATCH 메서드로 하시는것을 봤는데 궁금해서 찾아보니 PUT은 파일전체를 수정하는 것이고 PATCH는 들어오는 프로퍼티값만 변경한다고 한다. 여기에서는 PATCH 메서드가 더 적합한 것 같다.
handleDeleteClick
delete 버튼을 클릭하면 해당 블로그 글을 삭제하고 홈 화면으로 돌아오도록 코드를 작성했다.
먼저 버튼을 누르면 글을 삭제하기 위해서 DELETE 메서드를 사용해서 서버에 요청을 보낸다.
delete요청이 처리가 되면 .then으로 이어줘서 home path인 / 로 이동하도록 해줬다.
* 삭제하는 것이 적용이 되고 이후에 홈으로 돌아오면서 자동으로 홈 화면에 삭제된 목록이 반영이 되도록 then 내부에 navigate를 작성했는데, reference 코드에서는
이런식으로 홈으로 돌아오면서 새로고침이 되도록 해줘서 바로 렌더링이 되도록 작성되어 있었다.
handleSubmit
블로그 글을 생성하는 컴포넌트에서 등록 버튼을 누르면 data에 내가 쓴 글이 추가되고 홈 화면으로 돌아오도록 코드를 작성했다.
위에서 작성한 코드들과 비슷하게 작성했다. 일단 데이터를 서버쪽으로 넘겨서 추가해야 하기 때문에 서버로 전달한 객체를 기존 데이터와 같은 형태로 작성했다.( id작성을 어떻게 할지 고민했는데, 작성을 하지않으면 자동으로 작성해준다고 한다...)
그리고 POST 요청으로 body에 만든 객체를 json 파일 형태로 만들어서 전달하면 된다.
마찬가지로 요청이 완료되면 홈 화면으로 돌아오도록 useNaviage hook을 사용했다.
잘 작동하는 것 같다.
useFetch
여러번 사용된 useEffect에 감싸진 fetch 함수를 하나의 custom hook으로 만드는 리팩터링을 해봤다.
어제 해본것과 유사해서 복습하는 느낌으로 진행했다.
ScrollToTop Component
화면 전환시 스크롤를 가장 상단으로 이동시켜주는 hook을 작성해보라고 되어있었는데 구글링을 해 보니 대부분 컴포넌트로 만드는 것 같아서 컴포넌트로 만들어보았다.
useLocation hook은 React Router hook으로 해당 페이지의 정보를 반환한다.
여기서 pathname 프로퍼티를 빼와서, useEffect의 dependency array에 넣어주면 path가 바뀔 때 마다, 즉 Link태그를 타고 이동할 때 마다 window.scrollTo(0,0) 메서드가 발동하면서 스크롤을 맨 위로 보내준다.
약간의 기능을 담고, null을 반환하는 컴포넌트는 생소했는데, 이런식으로 사용할 수도 있다는 것을 알게되었다.
해당 컴포넌트를 Router 최상단에 배치하면 하위 Link 컴포넌트에는 모두 적용이 된다.
** ScrollToTop 컴포넌트가 뒤로가기에는 적용이 되지 않는것을 확인했다. 아마도 뒤로가기는 path이동이 아니라 이전 페이지 상태로 돌아가는 로직이여서 그런 것 같다. 실제로 홈으로 돌아가는 버튼을 추가하여 확인해보니 홈으로 돌아가는 버튼은 스크롤이 맨 위로 가고, 뒤로가기로 홈으로 가면 적용이 되지 않는것을 확인했다.
Reference
- 코드스테이츠