홈페이지와 프리젠터를 매칭시키며 보고 해당하는 기능을 컨테이너에서 찾으며 보기
이미 등록된 별점에 대해 수정하지 못하게 detail 프리젠터에 disabled 추가
다음 주소 검색 Modal
yarn add react-daum-postcode
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를 사용하게되면 임시 저장공간에 있는 값을 먼저 꺼내오고, 만약 임시 저장공간에 있는 값이 없다면 기본 값을 불러오게 된다.
토글을 활용하면 코드를 리팩토링하여 간단하게 만들 수 있다.
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();
};
안정적인 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