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