[2023.05.10 개발 일지] 리액트 backdrop 구현하기

728x90

Search Input이 focus되었을 때 배경이 검게 되어 검색창에 시선이 집중 되도록 하면서 주변 다른 컴포넌트와 겹치지 않도록 하려고 한다.

backdrop은 보통 Modal에서 많이 사용하는데 Modal과 같은 원리로 구현하면 된다고 생각했다.input에 focus가 되었을 때의 isFocused 상태일 때만 Backdrop 컴포넌트가 렌더링 되도록 하는데 ReactDOM의 portal을 이용한다.

index.html의 root 요소 위에 backdrop-root를 만들어서 backdrop이 화면 위를 덮도록 한다.

{isFocused && ReactDOM.createPortal(<Backdrop onClick={reset}/>,document.getElementById("backdrop-root")) }

사용하는 쪽에서는 focus의 상태와 createPortal을 활용해서 backdrop-root 요소에 Backdrop을 렌더링한다.

마지막으로 그냥 렌더링만 하면 backdrop을 지울 수 없기 때문에 backdrop을 클릭했을 때 backdrop이 없어지도록 해야한다.

Backdrop에 onClick prop을 추가하여 input의 focus와 입력값과 같은 상태를 reset한다.

대략 이런 느낌인데 여러번 테스트를 해보니 문제가 있었다.

데스크탑 버전에서는 정상적으로 작동하지만 backdrop을 지우지 않고 화면을 줄여서 모바일 화면을 보게 되면 backdrop이 그대로 남아있다.

backdrop이 남아 있는 것은 문제가 되지 않지만 데스크탑에서 input과 mobile에서의 input은 상속 관계이고 개별적으로 작동한다.

그래서 데스크탑 backdrop이 적용되어 있는 상태에서 화면을 줄이고 모바일 input을 focus하면 모바일 input에 대한 backdrop이 적용되어 backdrop이 2번 적용된다.

{!mobile && isFocused && ReactDOM.createPortal(<Backdrop onClick={reset}/>,document.getElementById("backdrop-root")) }

일단은 임시로 mobile 상태에서는 backdrop이 렌더링 되지 않도록 수정했다.

모바일에서는 backdrop이 없어도 상관없는게 header 위에서 동작하기 때문에 가려지지 않는다.

문제는 그게 아니라 input이 연동이 되지않는다는 점이다.

반응형 스타일링만 신경쓰다보니 component를 2개를 만들어버렸는데 말이 안되는게 검색을 하다가 화면이 줄어들었다고 해서 작성중인 input이 사라진 것과 같다.

그러면 스타일도 다르게 적용하면서 하나의 input을 어떻게 공유해야할지 고민이었다.

문제는 useState와 useReducer로 같은 컴포넌트지만 각각 다른 상태를 가지고 있기 때문에 리덕스를 사용해서 store에 있는 상태를 공통으로 사용하면 되지않을까 싶다.

참 바보같이 구현을 했는데 반응형을 제대로 배운적 없이 내 생각대로 하다보니 어렵다.

도서관을 와보니 리액트 뿐만아니라 프론트엔드 관련된 서적들이 있어서 여기서 공부하면서 책도 보는게 좋을 것 같았다.

리액트 강의와 공식문서에서는 볼 수 없었던 저자의 노하우라던지 팁 같은 것들이 있을수도 있어서 Do it 리액트 프로그래밍 정석을 초반부만 읽어보았다.

대략적인 느낌은 배운 내용을 복습하기에 좋아 보였고 프로젝트를 통해서 적용해볼 수도 있는 것 같다.

초보자나 처음 입문하는 사람이 보기에는 이해가 안될 수도 있어 보이기는 하지만 내가 보기에는 술술 읽히고 처음보는 내용도 있어서 괜찮은 것 같다.

728x90