Week 3 요약

Day 11

[ 이벤트버블링 : target과 currentTarget ]

<S.Contents> 에는 onclick={aaaa}가 없지만
상위 태그 <S.ItemWrapper> 에 onClick={aaaa}을 걸어놓는다.
<S.ItemWrapper> 를 클릭했을 때 하위 태그 <S.Contents> 도 실행될 수 있게, currentTarget을 지정한다.
-> <S.Contents> 에는 onClick이 없지만 자식에서 부모로 이벤트전파(버블링)가 되어 onClick={aaaa}이 실행된다

[ UI Library ]

라이브러리를 사용하는 이유
1. 시간 절약
2. 버그 최소화
많이 쓰는 라이브러리
1️⃣ Ant-Design 2️⃣ Materia - UI
실습
모달, 우편주소, 유튜브 등

Day 12

[ prev ]

원래 스테이트는 임시저장해놓고 마지막만 실행되기때문에
setCount( count+1 )
setCount( count+1 )
setCount( count+1 ) -> 3개가 아니라 1개만 올라간다.-> prev로 해결!
임시 저장공간에 기존 카운트값이 있으면 그걸 가져오고, 만약 없으면 초기값(count=0)을 가져온다.
그리고 임시저장에 1을 저장하고, 그 다음줄에서 prev는 임시저장에 있는 1을 가져와서 +1을 해줘서 2를 임시저장소에 저장

Day 13

[ Layout ]

pages의 설정페이지인 _app.tsx
레이아웃 컴포넌트를 만들어 주고 _app.tsx 내 컴포넌트를 감싸준다
-> 페이지가 변경되어도 모든 페이지에서 레이아웃이 공통적으로 보여지고, 레이아웃 컴포넌트 내부의 내용 Component 즉, props.children만 변경된다.
❗️ children의 타입은 ReactChild 로 정의되어있다 -> 바꾸면 안됨!

[ Carousel ]

설치하기
yarn add react-slick
yarn add slick-carousel
적용하기 -> 클래스로 표현됨(이제 이해가 간다,,🤦🏻‍♀️)

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import React, { Component } from "react";
import Slider from "react-slick";
export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>

Day 14, 15

페이지 처리 방식
페이지네이션 페이지 하단에 있는 숫자 형식의 링크를 클릭해서 다른 페이지들을 탐색할 수 있다
무한스크롤 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX)방식

[ 페이지네이션 ]

import { useState } from "react";
import React, { MouseEvent } from "react";
import * as P from "./pagination";

export default function Pagination(props) {
  const [startPage, setStartPage] = useState(1);
  const [isPage, setIsPage] = useState();

  function onClickPage(event: MouseEvent<HTMLElement>) {
    props.refetch({ page: Number(event.target.id) });
    setIsPage(Number(event.target.id));
  }

  function onClickPrevPage() {
    if (startPage === 1) {      
      return;         -----> 1페이지에 가면 이전페이지 그만 넘어가기
    }
    setStartPage((prev) => prev - 10);
    props.refetch({ page: startPage - 10 });
  }

  function onClickNextPage() {
    if (startPage + 10 > props.lastPage) {
      return;        -----> 마지막페이지에 가면 이전페이지 그만 넘어가기
    }
    setStartPage((prev) => prev + 10);
    props.refetch({ page: startPage + 10 });
  }

  return (
    <P.Pagination>
      <P.Wrapper>
        <P.PrevButton
          type="button"
          onClick={onClickPrevPage}
        ></P.PrevButton>
        {new Array(10).fill(1).map(
          (_, index) =>
            index + startPage <= props.lastPage && (
              <P.PageNumber
                key={index + startPage}
                onClick={onClickPage}
                id={String(index + startPage)}
                style={{
                  color:
                    isPage === Number(index + startPage) ? "#dfdfdf" : "black",
                }}
              >{` ${index + startPage} `}</P.PageNumber>
            )
        )}
        <P.NextButton
          type="button"
          onClick={onClickNextPage}
        ></P.NextButton>
      </P.Wrapper>
    </P.Pagination>
  );
}

[ 무한스크롤 ]

가장 많이 사용되는 라이브러리 : react infinite scroller와 react infinite scroll component
❗️ 설치 후 타입스크립트 오류는 yarn add -D @types/react-infinite-scroller 를 통해, 타입 지정이 가능하다

[ 얕은/깊은 복사 ]

얕은 복사 주소값을 복사하기때문에 원본의 값이나 복사된 값이 변경될 경우 두 값 모두 변경된다.
깊은 복사 전부를 복사해 새 주소에 담아주어 참조를 공유하지 않는다. 객체 전체를 문자열로 바꿔서, 바뀐 문자열을 객체로 바꾼다

JSON.stringify() 객체/배열 -> 문자열로 변환
JSON.parse() 문자열 -> 객체/배열로 변환