[TIL] 23.04.22.

오늘의 학습 내용

• 리액트, styled component 활용 공통 버튼, 모달, 커스텀인풋박스, 커스터셀렉트박스 만들기

새로운 배움

• useRef 요소 선택자로의 역할
• css z-index
• styled component 파일 분리
• props는 이벤트도 내려줄 수 있다.

문제 상황과 시도, 해결

• 이제껏 배운 리액트, 컴포넌트 간의 props 내려주기, styled component를 활용한 조건부 스타일들을 활용하여 조건에 따라 (primary, negative, 크기, 아이콘 유무) 버튼을 만들수있도록 구현해야 하였다. 우선 처음 컴포넌트를 구성할때는 버튼에 관한 조건이 발생할 경우 이에 조건에 따라 적절한 버튼을 리턴하는 버튼 컴넌트를 만들고 이 버튼 컴포넌트를 부모 컴포넌트에서 다양한 조건을 부여하며 부르는 과정이었다. 조건에 따라서 버튼의 타입과 사이즈는 적절히 잘 바뀌는데 부모컴포넌트에서 버튼 컴포넌트를 호출하는 부분에서 아무리 클릭 이벤트를 걸어도 클릭이벤트가 정상적으로 동작하지 않았다. 아니 사실 전혀 동작하지 않았다.

• 버튼에 온클릭이 전혀 걸리지 않았다. 그렇다고 버튼 컴포넌트 내부에 호출하는 부모 이벤트에서 작성한 이벤트 함수를 작성하기도 그랬다 결국 한번 프롭스로 내려줘보자 생각했고 부모이벤트에서 온클릭이란 이름의 프롭스로 내려주고 버튼컴포넌트에선 프롭스의 온클릭을 버튼의 온클릭에 할당하는 형태로 해결했다.
• 커스텀 셀렉트 박스를 구현하는 와중에 선택옵션목록이 아니라 외부영역을 클릭하면 자동으로 닫히는 형태를 구현했어야 했다. 커스텀 셀렉트 박스를 구현을 많이 한다는 것은 알고있었는데 막상 직접 구현해보니 곤란한 순간들이 많았다. 특히 자바스크립트에서 알고있는것을 리액트로 바꾸는 작업이 어려웠다. 클릭이벤트가 발생할 경우 올바른 요소(여기선 선택목록) 이 아니라면 선택목록 열림상태를 닫힘 상태로 바꿔준다고 생각했는데 클릭이벤트 발생시 클릭이벤트가 발생한 요소가 선택목록과 다른 요소라는것을 비교하기위해 선택목록에 아이디를 주고 도큐먼트로 접근해서 가지고 와야하나 생각했다
• 하지만 리액트에서 직접적인 선택은 피하는게 좋다고 들었었기 때문에 고민을 하다가 다른 팀원분들에게 여쭤봤더니 useRef 훅을 사용하셨다고 하셨다. 그순간 아 useRef는 요소 선택자로서 역할도 한다던 누군가의 말이 떠올랐다.
• 신나게 useRef를 통해 선택박스를 대상으로 지정하고 선택박스를 감싸고 있는 부모요소에서 이벤트가 발생할 경우 이벤트 타겟과 useref로 선택된 current가 다르면 상태를 변경해주는 식으로 구현했다.. 근데 이러고 보니까… 동작은 잘 되는데…. 정말 부모요소 div 사이즈안에서만 클릭 이벤트가 발생할 경우 판단이 가능하다는 것이었다. 어떻게 생각하면 당연한것인데…
• 요구사항이 App.jsx에서 여러 컴포넌트를 모아서 하나의 페이지를 구현한다음 한 페이지에서 여러동작을 하는 것이었고 셀렉트박스 닫힘 이벤트는 화면상 다른 컴포넌트 위치를 클리하더라도 진행됬어야 햇다…. 고민을 해도 ㅠㅠ 답이없어서 극단적으로 App.jsx에 가서 클릭이벤트를 걸까 생각도 했지만 암만 생각해도 이상한 생각 같았다.
• 또 다시 주변분들에게 여쭤보다가 같은 팀원분이 모달을 구현한 이야기를 듣고 실말이를 찾았다. 하나의 div를 두고 그 div 사이즈를 늘린다음 zindex로 조절하면 되겠다 싶었다!!!
• 처음에는 임의의 배경 div를 display none으로 진행한다음 셀렉트 박스가 오픈되면 display를 변경해주고 포지션과 폭, 높이를 주어서 화면 전체를 차지하게 하였다. 그리고 이벤트가 정상적으로 동작해서 오픈여부가 false가 되면 다시 display를 none으로 처리해주었다.
• 이 과정에서 z-index를 잡는데도 곤란함이 있었다. 처음에는 배경을 셀렉트 컴포넌트에서 리턴하는 값중에서 형제들 중에 제일 큰 형ㅇ님으로 지정해주었는데 z-index를 조절해도 본인의 형제 요소를 모두 아래로 내려서 최고 위로 올라가거나 아니면 본인의 형제 요소들 제일 밑으로 내려가느 것도 모자라 아예 다른 레이어들 아래로 내려가는 현상이 나타났다.. 현상을 몇번 반복하면서 테스트 하다가 이 배경 div는 형제요소들 레벨로 움직이는구나 생하였고 딱 선택목록 div의 형제요소로 준다음 z-index를 조정하니 의도대로 동작하였다.

느낀점

처음에 예시들만 보고 간단하다고 생각했는데 생각보다 세세하게 이벤트 동작을 처리해야하는 부분들이많아서 곤란한 순간들이 있기도 했었다.
간단한 기능이라도 이론만 알고있기 보다 이렇게 직접 구현해보니 어떤상황에 쓰이면 좋을지가 정리되는 시간이었다.