Modal에 boolean값이 아닌 데이터를 저장하는 경우
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
setIsModalVisible(false);
};
const handleCancel = () => {
setIsModalVisible(false);
};
const onCompleteDaumPostCode = (data: any) =>{
console.log(data)
setAddress(data.address)
setZonecode(data.zoneCode)
setIsModalVisible(false)// 함수 실행 후 modal 종료를 위한 setState 설정
}
return (
<>
<Button type="primary" onClick={showModal}>
우편번호 검색
</Button>
{isModalVisible && (<Modal
title="Modal Test"
visible={true}
onOk={handleOk}
onCancel={handleCancel}>
<DaumPostcode
onComplete={onCompleteDaumPostCode}
/>
</Modal>
)}ismodalvisibel state를 &&을 사용해주면 false일 때는 아예 && 뒤의 내용을 삭제하고 true일 때 다시 랜더링하기에 유저가 보기에는 값이 초기화 된 걸로 보인다.
TS에서 state 초기값 설정이 중요한 이유
typescript 에서는 state에 초기값을 정하지 않으면 타입추론에 의해 설정되지 않은 값 (===undefined)로 타입을 정해버리므로 이후에 들어갈 state에 문제가 생길 수도 있기 때문이다.
pervState
const onClickCountup = () =>{
setCount(count+1)
setCount(count+1)
setCount(count+1)
}위 코드를 실행하면 (count+1) 코드는 세 줄이지만 실제 함수 실행 후 값은 1만 증가한다.
그 이유는 state 변수는 값을 반환할 때 한줄한줄 실행하는게 아니라 함수 내부에서 임시 저장 공간에 값을 넣어놓고 다음 코드를 실행하기 때문에 초기값(count)이 0이면 setCount(count+1)이 세 줄이더라도 전부 count+1 === 0+1 이라는 값만 저장하므로 결국 위의 코드는 count 값에 1을 저장하라는 내용의 코드가 세 줄이 된다.
따라서 하나의 함수 내부에서 여러 줄의 state 값을 변환하려면 prev라는 값을 이용해 작성해야 한다.
const onClickCountup = () =>{
setCount(count+1)
setCount((prev)=>(prev+1))
}이렇게 작성하면 첫 setCount(count+1)로 인해 count의 값이 1이 되고 임시 저장 공간에 count=1이 저장된다.
이후 두 번째 줄에서 이전 값(prev)을 불러와 count+1 === 1(이전에 저장한 값)+1 을 진행하므로 임시 저장 공간에 count=2 로 저장하고 클릭 한번에 2가 증가하는 결과가 된다
prev를 이용해 같은 값을 불러오는 함수 여러개를 한개의 함수로 합쳐서 기존 코드를 효율적인 코드로 바꿔주는, 다시 말하면 리팩토링을 해줄 수가 있다.
이중 부정 연산자
TS에서 타입을 지정할 때 boolean으로 지정된 타입은 문자열을 받지 못한다.
그러나 이중 부정 연산자(!!)를 앞에 붙여주면 문자열에 값이 있을 경우 true를 리턴하기 때문에 boolean 타입에서도 사용할 수 있다.
readOnly={!!data}우편번호 검색을 위한 모듈 설치
yarn add react-daum-postcode
//설치 후
import DaumPostcode from 'react-daum-postcode';외부 모듈을 설치해올 경우 ts 설정은 사용자가 interface를 통해 개별적으로 커스텀할 수도 있고 외부 모듈을 제공하는 곳에서 타입을 지원하는 경우도 있다
husky
$ yarn add husky@4 --dev를 통해 설치. husky 뒤에 @4가 붙는 이유는 version.4 를 받기 위함.
설정은 package.json에서 설정이 가능하다
설정 후 lint-staged를 사용하기 위해
$ yarn add lint-staged를 추가로 설치하고 generate를 사용해 생성된 types.ts에 발생하는 eslint 오류를 방지하기 위해
.eslintrc 파일과 같은 위치에 .eslintignore라는 파일을 생성하고
/src/commons/types/generated/types.ts위와 같은 파일 위치를 적어서 적용이 안되게 해줄 수도 있다
경로는 파일의 위치마다 다르니 알아서 상대경로를 적용할 것.
prettier를 저장시마다 강제로 적용하기
적용하고자 하는 디렉토리와 형제 디렉토리로 .vscode 디렉토리를 생성해주고 그 내부에 settings.json 파일을 만들어준다.
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}settings.json에 위 코드를 작성해주면 파일을 저장할 때 마다 자동으로 prettier가 적용되어 알맞게 수정.
