웹사이트를 만들 때, HTTP 통신을 통해 비동기적으로 데이터를 불러오는 경우가 잦다. 예를들어, 내가 프로젝트에서 설계한 경우를 참고하면, 어떤 컴포넌트에서는 서버에 올라간 REST API에 전체 게시글 리스트를 요청하여 게시글들의 제목만 추출하여 게시판의 페이지 목록을 보여줘야 하는 경우가 있고, 또 다른 컴포넌트에서는 하나의 제목을 눌렀을 때 해당 게시물에 포함된 제목, 내용, 댓글 등의 내용들을 옆 페이지에 보여줘야 하는 경우가 있을 수도 있다.
이런 경우에, 보통 통신을 하는 규칙은 다음과 같다.
GET 메서드를 활용해서 API에 데이터를 가져오도록 요청을 보낸다. 리액트에서는 프로미스 형태로 값을 반환하는 axios라는 비동기 요청 라이브러리를 자주 사용한다. 어떤 API에 접근해서 특정 객체를 GET해오는 코드는 아래와 같다.
async function getUsers() {
const response = await axios.get("https://www.example.com/users");
return response.data;
}만약 www.example.com/posts 에 전체 포스팅이 JSON형태로 담겨 있다면, 전체 포스트 요청을 보내고 데이터를 받아온 뒤 필요한 필드 값을 추출해서 쓴다. 예를 들어 데이터의 제목만을 가져오고 싶다면 리턴 값에 담긴 data 데이터에서 개별 JSON객체에 map처리를 해서, post에 담긴 title만을 가져오는 식이다.
그런데 특정 id값을 가진 post의 데이터를 가져와야 하는 경우는 어떨까? 보통은 API에 템플릿 리터럴을 적용해서, 파라미터로 가져오고자 하는 객체의 고유값(id)를 넘겨준 뒤 아래와 같이 GET요청을 보낸다.
async function getUser(userId) {
const response = axios.get(`https://www.example.com/users/${userId});
return response.data;
}이렇게 HTTP 통신을 이용해 데이터를 가져오는 작업을 할 때 관리해 주어야 하는 상태에는 세가지가 있다. 각각 loading, data, error이다. loading은 어떤 사이트에서 사용자 인터랙션을 통해 뭔가를 요청했을 때, 사용자에게 그 데이터가 로드되고 있음을 알려주기 위해 필요하다. 데이터 로딩이 진행되는 시점에 loading 값을 true로 변경하여, 이 상태값을 감지해서 로딩 아이콘이나 상태바를 표시해 주는 데에도 사용된다. data 상태에는 try/catch문을 사용해서, 성공적으로 데이터를 받아왔을 때 그 데이터를 가지고 어떤 작업을 해 주기 위해 필요한 곳에 넘기거나, 함수에 넘긴다. catch문을 통해 에러가 발생했을 경우, 이벤트 객체를 참조해 어떤 에러가 발생했는지 화면이나 콘솔에 띄워 주는 작업을 할 수도 있다.
그런데, 매번 데이터를 요청할 때 마다 이 세 가지의 상태를 관리하기 위해서 각 요청 시에 매번 상태를 만드는 것이 매우 번거롭고 효율적이지 못하다. 그래서, 이를 useReducer을 사용해서 하나의 독립된 상태 관리 로직으로 만들고, 이를 재사용하면 코드의 효율성을 높일 수 있겠다. 또한 useAsync를 통해, 이렇게 만든 리듀서를 사용해서 액션을 디스패치 하고, 업데이트 된 상태를 리턴해 주는 로직을 커스텀 훅으로 만들 수도 있다.
지금 웹사이트의 구조 및 재설계
필요한 데이터는 postings 라는 API에서 관리되고 있음.
메인 화면, Board의 메인 화면, Archive의 메인 화면에서 postings객체의 특정한 필드값만 뿌려주고 있음. (제목, 카테고리, 작성일)
각각의 post에는 pk가 있어서 이것을 통해 고유한 key가 필요한 작업들을 해줄 수 있음.
개별 컴포넌트에서 반복적으로 수행하던 데이터 요청을 리덕스 없이, context API와 커스텀 훅으로 리팩토링 해보기.
- 각각 ContentContainer, Board 컴포넌트에서 받아온 전체 게시물 리스트를 map으로 뿌려줄 때, 컴포넌트의 제목 영역에 onClick함수 설정하기.
- 해당 제목 영역을 onClick하면, 리액트 라우터(hitory.push)로 개별 게시물의 하위 URL로 이동하도록 하고, 그 URL을 감지해서 EachPostContainer을 보여주도록. JSX 인라인 코드 블럭으로 리턴문 안에 작성할 수 있음.
- 이 때 클릭할 때 현재 상태를 관리해줄 수 있도록 useState로 setPostId 상태를 만들어 주기.
- 이 때 현재 테두리/배경색도 함께 전달할 수 있도록 context설정해서 색상값에 접근할 수 있도록 하기.
(계속 진행...)
