1 )
오늘 아침, 팀원들과 각자 작업한 코드를 merge하면서 어제 구현했던 Post기능에서 문제점을 발견했다. 게시물 등록 후 메인화면으로 이동하도록 구현하였는데, 이 때, List가 바로 업데이트가 되지않는 문제였다.
팀원들과 작성했던 코드를 다시 체크해보니 navigate로 메인화면으로 넘어간 후 데이터가 저장되도록 구현되어 있었다. post리듀서로 content를 추가하는 코드를 메인화면으로 이동하는 useNavigate코드의 앞으로 순서를 변경해주니 메인화면 List에 업데이트가 잘 되었다. 앞으로 실행되어야 하는 순서에도 주의를 기울여야겠다.
2 )
오늘은 Pagenation기능을 구현하였다.
Pagenation구현할 때, 기존의 list를 .slice 메서드를 이용해서 잘라서 나타내야 했었는데,
랜더링 순서로 인하여 게시물을 추가했을 때, 아래 오류메시지와 함께 화면이 사라지는 오류가 발생했다...
Uncaught TypeError: Cannot read properties of undefined (reading 'slice')콘솔로 .slice 한 내용을 찍어보니, 데이터를 받아오기 전에 빈 배열을 받아와서, 그 빈 배열을 slice할 수 없으니 위와 같은 오류가 발생한 것 같았다. useEffect로 state를 바꿀때마다 리랜더링을 하도록 코드를 짜보고, .slice하는 내용을 useEffect 안에도 넣어보는 시도들을 해보았지만 몇시간 동안 같은 오류들만 나타내며 해결되지 않았다.
그래서 같은 팀 팀원분의 도움으로 오류를 해결할 수 있었는데,
const currentPosts = contents.contents
? contents.contents.slice(firstPostIndex, lastPostIndex)
: null;삼항연사자를 이용해서 state의 contents가 있을 때, 위 .slice하는 코드가 실행되도록 수정하였다.
그랬더니 만난 다음 오류는 아래와 같다.
Uncaught TypeError: Cannot read properties of undefined (reading 'length')이것도 같은 랜더링 문제였다. 위의 contents의 length를 프롭스로 내리려고 해서 생긴 오류였는데,
{currentPosts && (
<ContentFooter
totalContents={contents.contents.length}
postsPerPage={postsPerPage}
setCurrentPage={setCurrentPage}
currentPage={currentPage}
/>컴포넌트 앞에 && 연산자를 추가해 currentPost의 내용이 있을 때 컴포넌트를 나타내도록 코드를 수정하며 오류를 해결할 수 있었다.
이번 오류로 데이터가 어떤 순서로 랜더링 되는지 알게 되고, 삼항연산자와 && 연산자를 통해서 데이터가 있을 때만, 실행되도록 하는 방법을 새로 알게 되었다.
Pagenation 구현하기
( 참고 : Youtube _ Code Bless You )
- 현재페이지와 페이지에 나타낼 개수를 담을 state만들기
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(8);- .slice 메서드를 이용하기 위해 한 페이지에 나타낼 첫 게시물의 index와 마지막 게시물의 index를 구하는 식을 작성한다. ( ex. 10개씩 자를 때, 1페이지의 첫번째 인덱스는 1, 마지막 인덱스는 10이 된다. )
const lastPostIndex = currentPage * postsPerPage;
const firstPostIndex = lastPostIndex - postsPerPage;- 위에서 구한, firstPostIndex와 lastPostIndex를 가지고 .slice 메서드를 이용하여 배열을 자른다.
const currentPosts = contents.contents
? contents.contents.slice(firstPostIndex, lastPostIndex)
: null;- setCurrentPage, currentPage, pages 를 props로 내려주어,setCurrentPage를 이용하여 원하는 페이지로 이동하는 pagenation 버튼을 생성한다.
<div className="pagination">
{pages.map((page, index) => {
return (
<PagenationBtn
key={index}
onClick={() => setCurrentPage(page)}
></PagenationBtn>
);
})}
</div>오늘은 Pagenation을 구현하다가 하루가 너무 빨리 사라졌다.
구글링으로 Pagenation을 구현하는 여러 방법들을 보면서, 처음에는 구현되는 과정이 이해가 가지않아 여러 번 반복해서 보느라 시간을 보냈던 것 같다. 이해가 안될때는 직접 그림으로 그려보는게 베스트여서, 참고하고 있는 코드와 내가 작업하는 코드의 차이점을 그림으로 그려보며 비교하다보니, 어떻게 코드를 작성해야하는지가 보였고, 여러 시행착오 끝에 기능구현을 오늘안에 잘 마무리 할 수 있었다.
내일은 프로젝트 작업할 수 있는 마지막날이다. 마무리까지 잘 진행되어 열심히 한 만큼 매듭도 잘 지을 수 있으면 좋겠다 :-)
