리액트 포털(React Portal)을 활용한 버튼 구현하기
💣 개요최근 프로젝트에서 화면 하단에 고정된 버튼을 구현하면서, 버튼의 위치가 동적으로 변경되지 않는 문제를 겪었습니다. 특히, 입력창(input)이 포커스될 때 버튼의 위치가 자동으로 조정되어야 했지만, 예상대로 동작하지 않아 사용자 경험에 문제가 발생했습니다. 1. 고정된 버튼의 위치 문제화면 하단에 고정된 버튼이 position: fixed 속성으로 설정되어 있어, 사용자가 input을 포커스할 때, 버튼이 키보드에 의해 가려지거나 위치가 적절히 변경되지 않아 사용성이 떨어졌습니다.2. 기존 해결 방법의 한계CSS만으로 문제를 해결하려 했으나, 다양한 화면 크기와 상황을 고려했을 때 고정된 bottom 값으로는 모든 상황에 적절히 대응할 수 없었습니다.이 문제를 해결하기 위해 React 포털을 도..
카테고리 없음
2024. 9. 10. 01:32
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- eventListner
- Repository pattern
- Vue.js
- 알고리즘
- vue.js3
- 웹훅
- 항해플러스프론트엔드
- 항해솔직후기
- event종류
- 더미데이터
- react
- Vuex
- loadbalancer
- 항해플러스후기
- React18v
- props
- vue3
- 빅오표기법
- 레포지토리패턴
- 디바운싱
- JWT토큰
- focus와blur
- Http통신
- 이벤트버스
- store.js
- 이벤트리스너
- useState
- reactnative
- http
- 로그인 인증
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
글 보관함