2022_10_25

Modal

ant design ver

import { Modal } from "antd";

export default function ModalAlertPage() {
  const onClickSuccessButton = () => {
    Modal.success({ content: "게시물 등록에 성공했습니다!!" });
  };

  const onClickFailButton = () => {
    Modal.error({ content: "비밀번호가 틀렸습니다!!" });
  };

  return (
    <div>
      <button onClick={onClickSuccessButton}>
        알림창 나타내기!! (성공했을 떄 메시지)
      </button>
      <br />
      <button onClick={onClickFailButton}>
        알림창 나타내기!! (실패했을 때 메시지)
      </button>
    </div>
  );
}

Modal을 이용한 prompt

import { Modal } from "antd";
import { ChangeEvent, useState } from "react";

export default function ModalCustomPage() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [password, setPassword] = useState("");

  const showModal = () => {
    setIsModalVisible(true);
  };

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

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

  const onChangePassword = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
    console.log(password);
  };

  return (
    <>
      <button onClick={showModal}>Open Modal</button>
      <Modal
        title="비밀번호"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>비밀번호를 입력하세요.</p>
        <input onChange={onChangePassword} type="password" />
      </Modal>
    </>
  );
}

주소 입력 모달

• react-daum-postcode

const [isModalVisible, setIsModalVisible] = useState(false);
		// case 1
		<>
      <button onClick={showModal}>우편번호 검색</button>
      {isModalVisible && (
        <Modal visible onOk={handleOk}>
          <DaumPostcode onComplete={onCompletDaumPostcomde} />
        </Modal>
      )}
    </>

		// case 2
		<>
      <button onClick={showModal}>우편번호 검색</button>
        <Modal visible={ismodalVisible} onOk={handleOk}>
          <DaumPostcode onComplete={onCompletDaumPostcomde} />
        </Modal>
    </>

Case1 : isModalVisible이 ture가되면 modal이 실행되고 완료하면 modal 이 꺼진다. (재부팅 개념)

case2 : isModalVisible에 따라 모달이 나타났다 사라졌다 하지만 내부적으로 실행이 되고있다.

state-prev

import { useState } from "react";

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

  const onClickCountUp = () => {
    setCount((prev) => prev + 1); // #1
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <div>현재카운트 : {count}</div>
      <button onClick={onClickCountUp}>카운트 증가!!</button>
    </div>
  );
}

prev는 임시저장소에 해당값이 있으면 그 값을 가져와 실행된다.

때문에 prev를 사용하면 setState()를 여러번 실행했을 때 렌더링에 의해 발생하는 문제점을 해결할 수 있다.

또한 중복되는 함수, 스테이츠를 정리하여 코드를 최적화 할 수 있다.

#1 의 경우 임시저장소에 count가 없는 상태이므로 state count의 초기값을 가져온다.

<>

를 import 하여 사용할 수도 있고 <> </> 로 생략할 수도 있다.

이때 <> </> 로 감싸게 되면 부모 요소가 없는 것과 같은 의미이다.

때문에 <>로 감싸고 map 사용하고 싶다면 반드시 를 import 하고 사용해야 한다.

Husky

husky

현재 7.04 버전은 논란이 많기에 안전한 4버전을 설치한다

yarn add husky@4 --dev

yarn add lint-staged

package.json 에 추가

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