프리뷰 다이얼로그의 크기 변화 방법

Question

리액트랑 next.js 로 이번에 프론트엔드 개발에 투입된 주니어입니다.거두절미하고, 프론트엔드 선배님들께 여쭤보고 싶은게 있습니다.상황: 현재 가장 기본 레이아웃으로 헤더, 왼쪽 네비게이션바, 푸터, 메인영역이 있습니다.이 레이아웃은 제가 나누고 있지는 않고, 회사에서 자체제작한 라이브러리로부터 layout을 임포트해서 사용하고 있습니다.그리고 어떤 정보에 대한 프리뷰 다이얼로그창을 제가 만들고 있습니다.프리뷰 다이얼로그창을 키면 메인 영역 꽉차게 프리뷰 다이얼로그창이 나오게 해야합니다.질문: 문제는 프리뷰창을 킨 상태에서 네비게이션바를 축소시키면 그에따라 프리뷰창도 맞춰 늘어나게 만들고 싶은데 쉽지가 않네요.. 어떻게 하면 좋을까요?Try: 일단 제가 시도한게 네비게이션바가 회사 자체제작 컴포넌트라서 뒤져보니까, 네비게이션의 축소 확장 상태가 있길래 그거 불러다가 쓸려고 했는데, 왜인지 pnpm run dev 하면 해당 컴포넌트를 임포트할 수 없다고 뜨더라구요 ㅠㅠ참고로 프리뷰창은 position fixed로 박아놓고 메인영역 사이즈에 맞춰 픽셀값을 지정해두는 방식으로 작성했습니다.

Ganymede Ganymedian · Answer

제가 질문을 제대로 이해했다는 전제로 답변해 드립니다.“러프하게 재현하자면, A, B, C 컴포넌트가 회사의 UI 를 구성하고 있는 상황에서,질문자에게는, B 컴포넌트를 변경할 권한 밖엔 없습니다.하지만, 필요에 따라, B 컴포넌트의 렌더링이 A, C 컴포넌트의 상태를 제어하거나 Overwrite 렌더링해줘야 할 필요가 있습니다.추가적으로, A 컴포넌트의 렌더링 상태를 제어해야 할 필요도 있습니다.“여기까지 제가 이해한 게 맞다면, 불가능합니다.NextJS 는 인터셉트라우트, 페럴럴 라우트로, 팝업이나 UI 요소, BottomSheet 등의 요청을 처리할 수 있습니다. React 가 원칙적으로 SPA 이기 때문에 가능한 일입니다. 하지만, React 는 상태기반이기 때문에, 상위 컴포넌트에서 ‘상태’ 를 열어주지 않았다면, 이건 불가능합니다. 상위 컴포넌트에서 이를 가능하게 해주는 프로바이더를 추가해줘야만 합니다..A, B, C 컴포넌트 전체를 감싸는 레이아웃에서, Provider 또는 Reducer 를 두고, 프로바이더가 제공하는, 스코프 내 전역상태를 사용하는 것이 React 의 일반적인 context 설계 패턴입니다. 이해가 아직 부족하신 것 같아서 제가 드릴 수 있는 말씀은 여기까진 것 같습니다.

rarity · Answer

css 영역입니다. 잘생각해보세요

프리뷰 다이얼로그의 크기 변화 방법

2개의 답변

기술 목록