useSelector 알아보기 (사용자 정보 받아올 때 사용하는 훅인 듯?) → 리덕스
useNavigate →(state)→ useLocation 프로필 설정 페이지에 적용 가능하지 않을까?
Today Task
•
모달창 UI 구현
Trouble
1.
모달창을 어떻게 구현할 것인가?
2.
클릭시 모달창 닫기 이벤트를 모달 섹션에 설정해두면, z-index로 위에 올려둔 버튼을 클릭해도 모달창이 닫기는 문제 발생
→ 섹션과 같은 크기의 백그라운드 div를 섹션 태그 내에 추가하여 클릭 이벤트 설정
⇒ 해결!
3.
모달창이 열릴 때, 슬라이드 애니메이션 추가과정에서 문제 발생
Trouble Shooting
1. 모달창 구현 방법 선택하기
1. 리액트 라이브러리 react-modal 사용
2. ReactDOM 사용
3. usePortal 훅 사용
4. useState 훅 사용
5. ... 등등
Plain Text
복사
•
다양한 방식이 있어 구현 방법 선택이 어려웠음
•
오류 발생의 위험이 있는 선택지와 DOM 사용 선택지(리액트에서 DOM을 보고 싶지 않은 개인적인 취향)를 제외
•
페이지별로 모달 컴포넌트를 쪼개어 페이지에서 간단하게 작성할 수 있고, state를 내려 받기를 시도해보고자 4번 선택
•
4번: useState 를 사용하여 state로 모달 컨트롤
→ 컴포넌트별로 props를 2번 이상 내려 받는데, 처음에 너무 헷갈렸음
→ 모달창이 화면에 렌더링 되는 부분에서 모달창 열기 버튼이 있는 가장 작은 컴포넌트까지 props 내려주기
⇒ 해결!
→ state를 받고 받고 또 받고
(사용자 정보는 아직 못 받음)
modal 에는 기본 형태만 저장하고 페이지 내에서 children 및 온갖 뫄뫄 작성 vs modal 내에서 컴포넌트별로 쪼개서 꽉꽉 작성해두고 페이지에서 간단하게 가져오기
3. 애니메이션 추가하기
a.
transition 적용
→ display: none에서 block으로 바뀌는 형태라서 적용 불가
b.
keyframes 사용
→ 애니메이션 적용 성공
→ 그러나 애니메이션 transform 위치가 안 맞춰지는 문제 발생
→ to에는 애니메이션이 들어가는 태그의 위치 설정값과 똑같이 설정
→ from에는 to와 위치 설정을 맞춘 후, Y값만 변경 (양수로 넣어야 아래→위로 설정됨)
⇒ 해결!
// 이전 코드
export const slideUp = keyframes`
from{
transform: translateY(-50px)
}
to{
transform: translateY(0%)
}
`;
// 수정 후 코드
export const slideUp = keyframes`
from{
transform: translate(-50%, 50px)
}
to{
transform: translateX(-50%)
}
`;
JavaScript
복사
Review
•
모달놈…. 처음에 삽질을 많이 해서 시간을 많이 버렸지만 방향을 잡고 나선 착착 진행됐다.
•
이번 작업을 하며 props 내려 받기를 조금쯤 이해하게 됐다.
•
애니메이션을 추가하며 굉장히 긴 시간 헤맸는데, 별 게 아니었다. 흠…
함께 봐준 팀원들에게 감사를…
