profile
Divide and Conquer

React 개발일지 - 1. dropdown

create-react-app으로 오늘의 집 웹사이트를 클론하면서 막혔던 부분을 기록해본다. 이번 파트는 dropdown이다. 우선 클릭을 했을 때, dropdown메뉴가 보여야 하고 다른 곳으로 focus가 이동하면 dropdown 메뉴가 닫혀야 하며 dropdown 메뉴 안의 리스트를 클릭했을 때, 닫히지 않고 내부의 anchor 역할을 수행할 수 있어야 했다. dropdown으로 리액트 이벤트를 구현하려했을때 처음 막히는 부분은 state를 어떻게 사용해서 dropdown이 사라지고 나타나는 걸 구현할 수 있을까였다. js에서는 classlist.add() classlist.remove()를 이용해서 특정 클래스가 있을 때 max-height값을 조절해주면 됐었는데, 리액트에서 state를 이용해서 하려니 머리가 멍해졌다. dropdown and usestate() state 값이 primitive 값일때 컴포넌트에서

2022년 2월 28일
·
0개의 댓글
·