본문 바로가기

modal2

여러개의 모달을 하나의 state로 관리하기 이번 프로젝트는 main에서 바로 리스트 노출이 되기 때문에 여러 모달을 한번에 관리해주어야했다. 더군다나 여태까지 작업할 땐 파일 한개에 모달이 한개여서 1모달 1state라 문제 없이 잘 작동하였는데, 여러 모달에 state는 하나라 한개를 누르면 다같이 모달이 열리는 것이다. 마치 왼쪽의 사진처럼 말이다. 그래서 하나의 state로 여러 모달을 관리하는 방법을 아래에 기술하도록 하겠다. useState 선언 및 함수 만들기 먼저 모달을 열고 닫을 수 있도록 isOpen이라는 boolean 값을 가진 state를 선언해준다. 이때 우리는 단순히 boolean으로 적었지만 앞으로 isOpen은 {id: boolean}처럼 생긴 객체로 관리될 것이다. const [isOpen, setIsOpen] = u.. 2023. 8. 16.
정규표현식을 이용한 sign up 구현하기-2 이전에 포스팅했던 계산된 속성명과 navigate는 제외하고 포스팅을 하려고 한다. 이번 포스팅에는 정규표현식을 이용한 이메일, 비밀번호 관리, 모달창 관리에 대해 이야기하려고 한다. 먼저 이메일과 비밀번호의 정규표현식은 아래와 같다. 이메일에는 앞에 영어가 들어가고 @ 이후 영어가 3글자 들어가고 끝난다. 이후 .을 찍으면 영어를 3글자를 더 써줘야 정규표현식에 맞춰 작성이 가능하다. 비밀번호는 10-16자로 이루어져 있고 영어, 특수문자, 숫자를 넣어줘야 정규표현식에 맞춰 작성할 수 있다. let emailRegular = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; let pwRegular = .. 2023. 7. 13.