React 검색 결과 새 탭 열기로 기능 추가할 수 있을까요?

Recoil을 사용 중입니다. 앱이 좌측에 메뉴, 우측에 페이지로 구성되어 있고, 페이지마다 상단에 검색바, 하단에 차트/테이블 등으로 되어있거든요. 검색 버튼을 누르면 각각의 차트/테이블 컴포넌트에서 API를 통해 요청하는 구조인데, 구현 사항은 '새 탭으로 검색하기'를 새로 추가해서 클릭하면 브라우저 새 탭을 열어서 검색에 필요한 요청 파라미터 값과 함께 해당 페이지를 별도로 띄워야 한다는 것인데요. 작성하면서 생각해보니, 현재는 PageComponent에 전달하는 파라미터가 없어요. <PageComponent /> 이걸 <PageComponent params={params} /> 형태로 수정하고 페이지 컴포넌트를 띄우면 될까 하는 생각이 문득 들긴 한데, 아직도 잘 모르겠네요. 페이지마다 상단에 있는 SearchWidget 컴포넌트를 상위로 옮겨야 할 것 같기도 하고, 어렵네요 😢

검색 결과가 없을 때는 빈 컴포넌트를 그려주고 검색할 때 recoil 변수에 저장했다가 해당 변수로 계속 그려주다가 새 데이터로 검색하면 변수에 새 값을 넣어주는 식으로 작업하면 어떨까했습니다. 데이터 요청시 recoil만 set하고 그 외에는 계속 사용만 하면 데이터 흐름도 꼬일 걱정이 없을 것 같구요

말씀하신 패턴처럼 하부 컴포넌트마다 새 탭의 세션 스토리지에서 값을 불러오는 로직을 추가하는 방향으로 가닥을 잡았습니다. 답변 감사합니다 👍

말씀하신대로 탭 UI로 가는 게 최선이긴 하지만, 당장 적용하기엔 너무 대공사가 될 것 같습니다 ㅎㅎ 어제 삽질을 열심히 한 결과 해법을 찾긴 했습니다! <SearchWidget /> 내부에는 수많은 서브 컴포넌트들이 함께 동작하고 있어요. <SearchWidget> <Dropdown /> <Input /> <Chips /> ... <Button label="검색" /> </SearchWidget> 대략 이런 구조인데, <Button label="새 탭으로 검색" /> 을 추가해서, onClick에다가 const newTab = window.open(window.location.href, '_blank'); if (!newTab) return; const storedSearchParams = newTab.sessionStorage.getItem(STORED_SEARCH_PARAMS_KEY); 이런 식으로 새 창의 세션 스토리지를 이용하기로 했어요. 그리고 각각의 서브 컴포넌트(Dropdown, Input 등)에서 세션 스토리지의 값을 확인하고, 존재하면 그 값을 사용하는 식으로 로직을 짜봤습니다. 맨 앞에 있는 Dropdown에만 우선 로직을 추가해봤는데 잘 동작하는 것을 확인했습니다. 이제 나머지 서브 컴포넌트들도 비슷한 로직들을 추가해줘야 하는 게 일이네요. 😭

그렇군요. 그래도 방법을 찾으셨다니 다행입니다!! 화이팅하세요 :D