bkdragon's log

화면 하단에서 올라오는 BottomSheet 를 React로 구현해보려고 한다. 데스크탑 해상도에서 Modal 창을 사용하는 화면을 대체할 수 있을 것 같다. 주 기능은 아래와 같다.특정 동작(버튼 클릭 등) 이후 화면 아래에서 올라온다.드래그를 통해 화면 아래로 내릴 수 있다.style은 tailwindcss를 사용했다.주 기능을 토대로 Props의 interface 부터 만들어보자.interface IProps { isOpen: boolean; onClose: () => void; children: React.ReactNode;}보여져야 하는 상황인지 알 수 있는 상태와 다시 안보이게 할 수 있는 함수를 받는다. UI와 기본 기능만 재활용할 것이기 때문에 내부 요소들은 children..

리액트의 기본 개념들을 하나씩 정리해보려고 한다. 어렴풋이 혹은 잘 몰랐던 부분들이 명확해졌으면 좋곘다. 렌더링React가 화면을 그리기 위해서는 렌더링 과정이 필요하다. 이는 흔히 브라우저 렌더링과 같다고 생각할 수 있지만 아니다. React의 렌더링과 브라우저 렌더링은 다르다. React의 렌더링은 React가 컴포넌트(함수형)를 호출하는 것을 말한다. 좀 더 정확히는 컴포넌트를 호출하여 반환된 React Element로 VDOM을 재조정하는 것이다. 즉, VDOM 에서 이뤄지는 작업을 말한다.React가 렌더링을 하려면 트리거가 필요하다. 트리거는 두가지 경우가 있는데 초기 렌더링과 컴포넌트의 state(+ props) 혹은 파생된 상태가 변경되었을 경우이다.초기 렌더링에 경우 React는 루트 컴..