12일차 / Modal, Prev, Husky

11일차 코드리뷰

홈페이지와 프리젠터를 매칭시키며 보고 해당하는 기능을 컨테이너에서 찾으며 보기

이미 등록된 별점에 대해 수정하지 못하게 detail 프리젠터에 disabled 추가

---

Modal

다음 주소 검색 Modal
yarn add react-daum-postcode

State prev

import { useState } from "react";

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

  const onClickCount = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };
  
  return (
    <div>
      <div>현재카운트: {count}</div>
      <button onClick={onClickCount}>카운트 올리기</button>
    </div>
  );
}

setCount(count + 1)를 여러번 줘봤자 onClickCount 함수가 끝나지 않았기 때문이 3이 되지 않는다.
해결하려면 prev라는 임시저장공간을 사용한다.

    setCount((prev) => (prev + 1));

이렇게 prev를 사용하게되면 임시 저장공간에 있는 값을 먼저 꺼내오고, 만약 임시 저장공간에 있는 값이 없다면 기본 값을 불러오게 된다.

Toggle

토글을 활용하면 코드를 리팩토링하여 간단하게 만들 수 있다.

export default function ModalCustomPage() {
  const [isOpen, setIsOpen] = useState(false);
  
 const showModal = () => {
    setIsOpen(true);
  };

  const handleOk = () => {
    setIsOpen(false);
  };

  const handleCancel = () => {
    setIsOpen(false);
  };

  const handleComplete = (data) => {
    console.log(data);
    setIsOpen(false);
  };

=> 중복코드 정리

export default function ModalCustomPage() {
  const [isOpen, setIsOpen] = useState(false);

  const onToggleModal = () => {
    setIsOpen((prev) => !prev);
  };

  const handleComplete = (data: any) => {
    console.log(data);
    onToggleModal();
  };

husky

안정적인 4버전 설치
yarn add husky@4 --dev

lint-staged 설치
yarn add lint-staged --dev

package.json에 추가

json
{
	...
	...
"devDependencies" : {
	...
	...
},
"husky": {
    "hooks": {
      "pre-commit" : "lint-staged"
    }
  },
"lint-staged": {
	"**/*.{ts,tsx}" : [
			"npx eslint ."
	  ]
	}
}

삭제
yarn remove husky