14) 목요일

이희주·2022년 5월 26일

React

지난시간 코드리뷰

navigation에서 각 버튼 클릭하면 이동하게 하기 !
로고 클릭하면 메인페이지로,
로그인, 회원가입 버튼도 만들어주기

2. slider 세팅

이렇게 해도 되고 이렇게 해도 된댜

3. 네비게이션 부분 함수

네비게이션 함수 하나로 합치기
원래는 onclick시마다 함수를 하나씩 합쳐줘야하는데, 번거로우니까 하나로 합쳐준다

onclickmenu 로 세개를 합쳐준 뒤
id라는 event.target을 이용하여 각각의 id를 container에 인자로 넘겨준다 -> 3개의 메뉴가 있기 때문에 map을 통해 반복 시켜준다

버튼을 가로로 작성하려면 로 해주면 좋을듯! (아니면 display flex 로 해주기)

router.push(event.target.id) 에서 id에 빨간줄 쳐져있을수도 있는데 그거는 어떤 브라우저에서 실행되느냐에 따라 id가 있을수도 있고 없을수도 있기 때뮨이다 그래서 이거 해결하려면 if(event.target instanceof Element)써주면 됨!
container
export default function LayoutNavigation() {
  const router = useRouter();

  const onClickMenu = (event: MouseEvent<HTMLDivElement>) => {
    if (event.target instanceof Element) router.push(event.target.id);
  };

  return <LayoutNavigationUI onClickMenu={onClickMenu} />;
}
presenter
const NAVIGATION_MENUS = [
  { name: "라이브게시판", page: "/boards" },
  { name: "라이브상품", page: "/markets" },
  { name: "마이페이지", page: "/mypages" },
];

export default function LayoutNavigationUI(props: ILayoutNavigationUIProps) {
  return (
    <Wrapper>
      {NAVIGATION_MENUS.map((el) => (
        <Fragment key={el.page}>
          <MenuItem id={el.page} onClick={props.onClickMenu}>
            {el.name}
          </MenuItem>
        </Fragment>
      ))}
    </Wrapper>
  );
}

pagination

페이지네이션?
: 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법
게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식이다

페이지 목록 보여주기

export default function MapBoardPage() {
  const [startPage, setStartPage] = useState(1);
  //기준페이지 목록을 만들어주기 위해서 state 사용(1~10)이니까 시작은 1
  const { data, refetch } = useQuery(FETCH_BOARDS);
  //리패치 함수 가져오기 (버튼을 클릭할 때 마다 패치보드가 다시 실행됨)
  const { data: dataBoardsCount } = useQuery(FETCH_BOARDS_COUNT);
  //게시물 수 패치한것도 usequery 해주기 (data 이름 두개 쓸 수 없으니까, data 이름 boardscount로 바꿔주기)

  //마지막 페이지 구하기
  //전체 게시물의 수 나누기 10을 한 다음 나머지가 있다면 올림으로 올려주기
  //전체 게시물의 수는? fetch_boards_count로!
  const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);
  //데이터가 처음에 있을수도 있고 없을수도 있으니까 옵셔널체이닝 걸어주기

  //페이지 클릭시 실행 될 함수
  const onClickPage = (event: any) => {
    refetch({ page: Number(event.target.id) });
    //페이지를 클릭할때마다 리패치 되도록 하기
    //event.target.id 는 => span태그 속의 '1'을 가지고 오는데, 얘는 string 이기 때문에 Number태그로 감싸서 number 타입으로 바꿔준다
  };

  //이전페이지목록 클릭시 실행 될 함수
  const onClickPrevPage = () => {
    //이전페이지가 마이너스로 안넘어가도록 검증해주기
    if (startPage === 1) return;
    setStartPage((prev) => prev - 10);
    // 페이지를 누적해줘야 하기 때문에 기존에 있는 setStartPage에서 10을 빼줘!
    refetch({ page: startPage - 10 });
    // 누르면 기준페이지에서 -10 으로 리패치해주기
  };

  //다음페이지목록 클릭시 실행 될 함수
  const onClickNextPage = () => {
    //스타트페이지가 마지막페이지라면 다음페이지로 안넘어가도록 검증해주기
    if (startPage + 10 <= lastPage) {
      //1.마지막페이지 계산 2.계산된 마지막페이지가 startpage+10 보다 클 때만 이동되도록 하기)
      //마지막 페이지는 어떻게 계산하지? 위쪽에!
      setStartPage((prev) => prev + 10);
      // 페이지를 누적해줘야 하기 때문에 기존에 있는 setStartPage에서 10을 더해줘!
      refetch({ page: startPage + 10 });
      // 누르면 기준페이지에서 +10 으로 리패치해주기
    }
  };

return (
   <div>
      {/* 페이지 목록 map으로 가져오기 */}
      {data?.fetchBoards.map((el: any) => (
        <MyRow key={el._id}>
          <MyColumn>{el.writer}</MyColumn>
          <MyColumn>{el.title}</MyColumn>
        </MyRow>
      ))}
      {/* 이전페이지, 다음페이지도 가로로 만들어주기 위해서 세개 다 span 태그로 만들어주기 */}
      {/* 페이지 목록을 10개씩 보여주니까, 기준페이지를 잡아서 이전페이지에는 기준페이지목록에서 10빼주고, 다음페이지는 기준페이지목록에서 10더해주기 */}
      {/* 기준페이지는? state로 넣어두면 된다 */}
      <span onClick={onClickPrevPage}>이전페이지</span>
      {/* startPage - 10 */}
      {/* 배열에 똑같은값이 10개들어가있으니까 Array 10개 만들어서 fill로 값 채워주기 Array(10).fill(1)*/}
      {new Array(10).fill(1).map(
        (el, index) =>
          index + startPage <= lastPage && (
            // 페이지가 10개단위로 나오니까, 마지막페이지 다음부터는 안나오게 해주기 위해서
            // 인덱스 + startPage가 lastPage 보다 작을때만 리턴값을 보여주기
            <span
              key={index + startPage}
              id={String(index + startPage)}
              onClick={onClickPage}

              {" "}
              {index + startPage}{" "}
            </span>
          )
      )}
      <span onClick={onClickNextPage}>다음페이지</span>
      {/* startPage + 10 */}

State Lifting

: state 끌어올리기

react의 데이터 흐름은 상위에서 하위 컴포넌트의 하향식, 단방향 데이터 흐름이다
그런데 단방향 데이터의 경우

부모컴포넌트 안에 자식컴포넌트 1,2가 있는 구조에서
자식컴포넌트 1의 state를 자식컴포넌트 2에서 보여주는것이 불가능하다
(자식컴포넌트2의 state를 부모에서 보여주는것도 불가능)

해결방법은?

자식컴포넌트의 state, setState를 부모 컴포넌트로 끌아올려서 선언해주면 된다!
그리고 props로 내려준다면
자식컴포넌트 1,2에서 모두 state를 사용할 수 있게 된다

이걸 state 끌어올리기 라고 한다

Daily Scrum

: 얕은 복사와 깊은 복사

얕은 복사는 1차 깊이만 복사해온다

댓글수정의 경우
index에 끌어올려주고?
commentwrite container
commentlist container
로 내려주기?

함수 자체를 index에서 작업하고 그 함수 자체를 넘겨주는것도가능
setState 직접 내려주기
boardlist 의 경우 공통으로 사용하는 데이터는 index에 가져가주고, pagination이랑 boardlist에 내려주기
data는 board 해주고, pagenation은 리패치 해주고!