14일차 프레임워크/ 라이브러리와 레이아웃 구조 4

osdsoonhyun·2023년 2월 24일

TIL 코드캠프

코드캠프

목록 보기

14/22

다른 페이지 보여주기 -> Pagination
State 나누기(댓글 수정) -> Leifting-State-Up

포트폴리오 리뷰

1. apollo setting

MyApp에서 자식들이 props.children으로 들어가고 ApolloSetting 에서 props.children으로 박스가 들어간다.

실제로 실행이 되면 위와 같은 형태와 동일하게 작동한다.

동일하게 실행되는데 이렇게 분리한 이유는, GraphqlSetting 페이지를 분리할 수 있다.

2. layout

Layout 구조를 보면 위의 Header,Banner, Navigation은 항상 보여진다.

처음에는 이렇게 하였으나, 게시판, 상품, 마이페이지 이외에 다른 페이지들을 추가할때 확장성과 유지보수 측면에서 매우 떨어진다.

서비스 중심이 되는 방향
1. 퍼포먼스(성능)이 좋아야 하는 서비스
2. 큰 규모에서 확장성, 유지보수가 좋아야하는 서비스
-> 웹/앱에서 주로 사용되는 서비스
3. 안전성이 중요한 서비스

위 로직을 확장성, 유지보수를 좋게 하기 위한 프로세스

공통되는 부분들을 묶어본다. (onClick, router.push. id)
어떻게 하면 메뉴 아이템들을 클릭했을 때 해당 페이지로 이동이 가능할까?
-> 태그의 id 값에 라우터 주소를 넣고 event.target.id로 주면 되겠구나!

1차 리팩토링 이후 onClick에 같은 값이 들어가는데 id값과, 내용부분만 바꿔주면 자동화가 되겠구나!
전에 목록보기에서 똑같은 것이 10번 반복되었을 때 map을 이용해서 보여주었다.
한 줄 한 줄이 백엔드에서 가져온 데이터라고 생각하고 배열 안에 객체라고 생각한다!
클릭했을 때 실행이 되어야 하므로 onClick 속성을 넣어주고 onClick 했을 때 필요한 event.target.id값이 필요하므로 id 값을 넣어준다.
map을 사용하고 있으므로 key 값도 넣어준다.
props 또한 onClick 속성을 준다.

처음에는 비효율적으로 하고 리팩토링을 통해 확장성과 유지보수를 좋게한다.

spread 연산자

Pagination

게시판에서 1,2,3..페이지
페이스북, 인스타에서 스크롤 내려서 보이는 것 또한 1,2,3,.. 페이지

페이지네이션 example-api에서 backend-api 전환

codegen, apollo index.tsx에서 backend-api로 전환 (codegen 설치 필요?)
$yarn generate를 통해 바뀐 uri에서

게시글 불러와서 목록과 페이지 뿌리기

typescript map을 이용할 때 map 객체의 원소 타입을 정해주는 것이 아니라 fetchBoards의 타입을 결정하면 el 타입에서 꺼내오는 것도 타입이 지정된다.

페이지 클릭시 리페치하기

등록, 삭제, 수정 이후에 리페치 -> mutation 이후에 refetchQueries 했으나
mutation을 하지 않고 원할 때에 리페치할 수 있다. -> refetch

타입스크립트에서 void vs async/await
끝날 때까지 기다리고 나서 아래쪽 작업을 처리해줘야 한다 -> async/await
refetch만 하고 말거기 때문에 기다릴 필요가 없다.

onClick은 마우스로 클릭한 것이기 때문에 마우스 이벤트이고 input 태그를 onChange 했을 때는 change 이벤트가 된다.
mouseEvent이고 span 태그를 클릭했을 때이므로 event: MouseEvent<HTMLSpanElement>

event.currentTarget vs event.target
currentTarget -> 현재 타겟이므로 클릭했을시 타겟(무조건 id값이 있다)
target -> 클릭했을때만 사용하는 것이 아니다. 태그가 아닌 다른 용도로도 사용된다. (id가 있을 보장이 없다.) 이미지 업로드시 문제 발생

이전페이지, 다음 페이지 구현하기

마지막 페이지 조건부 렌더링하기

lastPage 구하고 페이지가 없으면 다음 페이지 버튼이 안눌리게 된다.
마지막 페이지에서 존재하지 않는 페이지도 화면에 보여지는데, 이는 new Array(10)를 통해 map으로 뿌려주기 때문에 10개씩 보여진다.
데이터가 존재하지 않는 페이지의 번호(마지막 번호 이후)를 조건문을 통해 보여지지 않게 한다.

{
  new Array(10).fill(1).map((_,index)=>(
    <span 
      key={index} 
      id={String(index+startPage)} 
      onClick={onClickPage}
      style={{ margin : "10px"}}
    >
      {index+startPage}
    </span>
  ))
}

위와 같이 마지막 번호 이후는 안 보이도록 한다. 아래는 조건부 렌더링을 이용한 최종 코드이다.

<span onClick={onClickPrevPage}>이전페이지</span>
      {new Array(10).fill(1).map(
        (_,index) => 
        
          index+startPage <= lastPage && ( 
            <span 
              key={index} 
              id={String(index+startPage)} 
              onClick={onClickPage}
              style={{ margin : "10px"}}
            >
              {index+startPage}
            </span>
          )
      )}
<span onClick={onClickNextPage}>다음페이지</span>

state 끌어올리기

위의 내용인 페이지 번호, 이전페이지, 다음페이지를 공통 컴포넌트로 분리하기 위해 state 끌어올리기를 사용한다.
목록만 상품으로 바뀌면 상품 pagination, 목록만 질문으로 바뀌면 질문 pagination이기 때문에 컴포넌트로 빼서 사용하는 것이 더 효율적이다.

자식에 있는 state를 형제 컴포넌트에게 state를 주고 싶은데 어떻게 해야할까