220331

👩🏻‍💻 Learn

@types

타입스크립트 기반으로 된 라이브러리 다운 받기. vscode에서 타입 오류가 나는 걸 막을 수 있다. 다운받으려는 모듈 이름 앞에 @types 를 붙여주면 된다. 지원 여부는 Docs 읽어볼 것!

yarn add @types/react-slick --dev

--dev

개발서버에서만 사용할 모듈을 다운로드 받을 때 써주는 CIL

dependencies 브라우저에서 필요한 모듈
devDependencies 개발 서버에서만 필요한 모듈
yarn install --production dependencies에 있는 것만 설치하는 명령어

Pagination

페이지네이션은 페이지 번호를 이용해서 페이지를 이동하는 방식이다.

페이지네이션을 하기 위해 필요한 준비물

• pagination 컴포넌트
• pagination 을 적용할 컴포넌트
• 둘을 합쳐서 한 번에 보여줄 페이지 컴포넌트

물론 하나의 컴포넌트 페이지에 작성해도 되지만 페이지네이션을 만들어 두는 이유가 다른 페이지에서도 import 하여 사용하기 위함이므로 따로 작성하는 편이 낫다.

위의 컴포넌트 목록을 각각 pagination, board, index 라고 정의했을 때 필요한 내용은 다음과 같다.

• pagination
  • 페이지를 이동시킬 onClick 이벤트 함수들(현재 페이지 번호, 이전 페이지, 다음 페이지)
  • 페이지 번호를 받아와 보여줄 함수(new Array(n).fill(1).map(_, index) 사용)

• board
  • 페이지 이동에 따라 보여줄 fetch UI

• index
  • 보여주고자 하는 데이터의 query 문
  • useQuery를 사용해 props로 넘겨줄 setState

state 끌어올리기

자식 컴포넌트에 있던 state, setState 를 부모 컴포넌트로 옮겨줘서 여러 자식 컴포넌트들이 state를 props 해서 사용할 수 있게 하는 것을 말한다. 부모 컴포넌트에 state 할당 후 자식 컴포넌트로 넘겨주면 된다.

부모 컴포넌트에 할당된 state 를 자식 컴포넌트로 props 하는 방법은 두 가지가 있다.

• 실행 함수 전체를 넘기기
• setState 값 넘기기

export default function Parents() {
  const [count, setCount] = useState(0);

  // 방법1 : 실행 함수 전체 넘기기
  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
     					// 방법2 : setCount 값 넘기기
      <Child1 count={count} setCount={setCount} />
      <div> =============================== </div>
      <Child2 count={count} onClickCountUp={onClickCountUp} />
    </div>
  );
}

📝 Review

오늘 페이지네이션 하면서 시간을 엄청 썼다. 이해가 되다가 안되다가 이해가 되던것도 이해가 가지 않게되는 기적을 경험하고 옴... 페이지네이션은 따로 코드를 정리해두는 게 좋을 것 같다.
오늘 퀴즈하다가 진짜진짜 쉬운 내용인데 적용을 잘못해서 시간을 왕창 잡아먹었다. 더이상 넘어갈 이전/다음 페이지가 없을 때 버튼을 비활성화 하는 거였는데 바보같이 onClick 함수에다 주고 있었다. 그러니 적용이 이상하게 될 수 밖에... isActive 를 바로 태그에 주고 삼항 연산자를 이용하면 되는 거였는데 onClick 함수의 if 조건문 안에다 주고 있으니 click을 하지 않으면 이벤트가 일어나지 않아서 한참 고민했다.
antd에서 가져온 아이콘에 색상을 바꿔서 비활성화/활성화에 변화를 주고 싶었다. 그러다 버튼에 disabled 주는 방식을 보고 나서야 깨달았다. 내가 바보짓을 하고 있었다는 걸...

🔥 Will

• 프로젝트 진도 밀리지 않기
• 게시판 메인 테마 생각하기