리액트 새창열고 데이터 주는방법

Question

안녕하세요:)
웹 개발 중에 궁금한 점이 있어서 질문드립니다.

리액트로 사이트를 개발중입니다.

리액트로 된 www.aaa.com 사이트 에서  버튼 클릭 시 리액트로 된 www.bbb.com사이트를 새창으로 열려고 합니다. 
새창 연결 시, data를 넘겨 주어야하고 B사이트에서는 data를 가지고 조회를 해서 화면에 보여 주어야 하는데요

B사이트는 그냥 라우터 www.bbb.com 하나로 되어있고, api요청시 
www.bbb.com/api/data 이렇게 요청을 보내 화면에 보여주는 역할을 합니다.

어떻게 해야할까요?

누구라도 알려주시면 너무 감사하겠습니당 ㅜㅜ

김인후 · Answer

안녕하세요.

aaa.com, bbb.com으로 볼 때 도메인이 다를 거 같은 데 노출되어도 상관이 없다면 Query Params를 사용할 거 같아요.

행운아777 · Answer

A사이트랑 B사이트가 서로 얘기가 되어서 통신에 맞춰서 소스코드를 수정해주기로 협의가 되어있는거죠?

김인후님 답변처럼 새창을 열 때 쿼리 파람을 얹어서 주거나 아니면 post로 전달 해주려면 A사이트에 페이지 전환용 form만 들어있는 페이지 작성 -> B사이트로 post 호출 이렇게 구성해서 리퀘스트 바디에 넣는 방법도 있을 것 같아요. 전달해야 하는 데이터가 크거나 주소창에 노출하기 싫은 경우라면 고려해볼만 할 것 같고...

제가 알기로 이런 케이스에서 정석은 window.postMessage 이용하는걸로 알고 있습니다. 제가 앞서 언급한 것 처럼 A사이트와 B사이트가 협의가 되어있다는 전제 하에 얘네 끼리만 통신이 가능하게 설정할 수 있어서 보안이 아주 좋아지거든요.

아래 mdn 문서 참고하시기 바랍니다.

https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

구글링 쫌 해보니까 아래와 같이 예제 만들어서 공유해 놓은 분도 있네요.

https://www.d5br5.dev/blog/deep_dive/react_popup