티스토리

일단 해보는 기록

검색하기

블로그 홈

일단 해보는 기록

heeheehoho.tistory.com/m

일단 해보고 고민해볼게요.

구독자: 8

방명록 방문하기

주요 글 목록

React 전역 Modal 추상화 정복기 - 마지막 모달 레이아웃 컴포넌트 추상화로 템플릿 모듈화 하기 -지금까지 반복적으로 사용된 UI 요소들을 새로운 모달이 추가될 때마다 템플릿으로 사용할 수 있는, 재사용 가능한 레이아웃 컴포넌트로 분리한다.1. 기본 구조return ( //모달 );단순하게 배경을 클릭하면 닫히는 div와 렌더링 되는 모달 컴포넌트를 children으로 받는다.2. Overlay 분리`Overlay`처럼 배경을 누르면 닫히는 기능은 `Bottom Sheet`등에서도 활용될 수 있어 분리하고, 내부 children도 Container로 분리했지만 이 단계에서는 큰 의미가 없었다. 개선``는 분리하지 않는 것으로 1차 개선했다.3. 작게 분리하고 모듈화 하기보통 모달 내부 콘텐츠 레이아웃을 분리할 때 `Header / B.. 공감수 1 댓글수 0 2024. 4. 16.
React 전역 Modal 추상화 정복기 - (5) 모달 내부에서 서버 통신을 위한 로직 개선 -열린 모달의 내부에서 사용자의 액션에 따라 서버 통신을 하도록 개선한다.모달 컴포넌트와 호출 컴포넌트의 역할 분리로 재사용이 가능하면서 선언적으로 사용할 수 있도록 한다.모달에 갇힌 서버 응답값 구출야무지게 모달을 완성했다고 생각했지만, 정작 모달이 필요한 이유였던 채팅방 생성 모달을 구현하려고 하니 비동기 처리가 되지 않는다는 사실을 알게 되었다. 그 말은 지금까지 만든 모달은 `Confirm`의 역할만 하고 있는 것이다. 더 이상 useModal 파일을 보지 않아도 될 것이라 생각했는데 결국 다시 뒤엎는 과정을 겪었다. 이쯤엔 거의 10차가 넘어가는 리팩토링 단계였기 때문에 그냥 넘어갈까?라는 고민도 많이 했다. 하지만 이 또한 궁금함과 하다가 만 느낌을 .. 공감수 2 댓글수 1 2024. 4. 14.
React 전역 Modal 추상화 정복기 - (4) ContextAPI와 상태 관리 라이브러리의 목적-이번 글은 완성 모달에 영향을 미치지 않는, 최종 코드에서 삭제된 부분에 대한 내용이지만 그 과정을 적어두고자 작성하는 챕터로 방향성을 잘못 잡으면 코드가 얼마나 산으로 갈 수 있는지를 느껴본다.Local 모달의 의미를 찾아서내가 창조한 요상한 기능은 Local 모달 이라고 부르기로 한다. 먼저 이 상황이 발생한 이유는 최종이라고 생각한 모달이 `Jotai`로 했을 때와 어떤 차이가 있는지 체감이 되지 않았기 때문이다. 분명 뷰와 관련된, 특히 재사용 가능한 UI를 전역으로 관리할 때에는 `Context`가 낫다고 들었고, 공감이 되는 듯하면서도 정확히 설명할 수 없었다. `Context`의 역할을 느끼기 위해 모달을 부분적으로 사용하는 상황을 가정하여.. 공감수 1 댓글수 0 2024. 4. 13.
React 전역 Modal 추상화 정복기 - (3) Context와 Custom Hook에게 역할 부여하기 -이미 만들어져 제공되는 것들(API, 라이브러리 등)은 이전에 느꼈던 불편함을 해소하기 위함이다. 해결의 과정에서 앞으로 생길 수 있는 모든 불편함까지 고려할 수는 없기 때문에 그 기능들은 각자의 역할과 목적을 분명히 갖는다. 이유 없이 사용하는 습관을 고쳐 보자.1. renderModal에 1개의 모달 바인딩하기한 번에 모든 문제를 해결해 보려다가 모달 상태를 배열이 아닌 1개씩만 저장하는 생뚱맞은 구조로 변경했다. 단일 엘리먼트를 상태에 저장하게 되면서 다중 모달을 열게 될 경우에는 이전 모달이 닫힌 후 새로운 모달이 열리는 식으로 동작한다. 서비스에 따라 원하는 방향일 수도 있지만 내가 의도한 방식은 아니었다.⚠️ 문제`renderModal`.. 공감수 2 댓글수 0 2024. 4. 13.
React 전역 Modal 추상화 정복기 - (2) 모달 상태 관리를 Jotai에서 ContextAPI로 리팩토링 하기-ContextAPI로 리팩토링 하면서 리액트 라이프사이클 활용법과 뷰와 렌더의 분리로 얻게 되는 이점을 알아본다. 1. 👋 Bye Jotai , 🙌 Hello ContextAPI>_ ModalContext.tsxconst ModalContextProvider = ({ children }: PropsWithChildren) => { const [modals, setModals] = useState([]); const location = useLocation(); const openModal = (element: JSX.Element) => setModals((prev) => [...prev, element]); const clo.. 공감수 1 댓글수 2 2024. 4. 13.
React 전역 Modal 추상화 정복기 - (1) 선언적으로 모달을 사용하기 위한 리팩토링 여정 -모달 상태 관리를 Jotai에서 ContextAPI로 리팩토링하는 과정에서 얻은 배움을 단계별로 소개한다.총 6개 챕터로 구성되었으며, 챕터 5에서 최종 완성 버전을 확인할 수 있다.들어가며프로젝트를 진행하면서 모달이 필요했고, 라이브러리를 이용하면 간단하겠지만 지금 나에게는 만들어보는 과정이 더 의미 있을 것이라는 판단에 직접 구현해 보기로 했다. 그리고 단계별 리팩토링으로 시행착오가 많았던 과정을 상세히 담기 위해 시리즈로 구성해 글로써 작성해 본다. 시리즈 요약Jotai가 쏘아올린 작은 공👋 Bye Jotai, 🙌 Hello ContextAPIContext와 Hook의 역할 분리[☕️ 쉬어가기] Local 모달의 의미를 찾아서(부제: 냄새나는 코드.. 공감수 2 댓글수 2 2024. 4. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.