React onClick 페이지 이동 파라미터 - React onClick peiji idong palamiteo

영화 리스트를 보여주는 페이지와 특정 영화의 상세 정보를 보여주는 페이지를 react-router-dom 패키지를 통해 구현하고자 했다.

다음과 같이 구현해도 정상적으로 동작하였지만  'movies'가 공통적으로 들어가기 때문에 하나의 그룹으로 경로를 묶고자 하였다.

<Routes>
	<Route path="/movies" element={<Movies />} /> 		// 영화 리스트를 보여주는 페이지
	<Route path="/movies:id" element={<Detail />} />	// 영화 상세정보를 보여주는 페이지
</Routes>

따라서 다음과 같이 'movies'를 그룹화하여 구현하였다.

<Routes>
	<Route path="/movies">
		<Route path="" element={<Movies />} /> 		// 영화 리스트를 보여주는 페이지
		<Route path=":id" element={<Detail />} />	// 영화 상세정보를 보여주는 페이지
	</Route>
</Routes>

처음에는 다음과 같이 구현하였지만 정상 작동하지 않았다.

<Routes>
	<Route path="/movies" element={<Movies />}> // 영화 리스트를 보여주는 페이지
		<Route path=":id" element={<Detail />} /> // 영화 상세정보를 보여주는 페이지
	</Route>
</Routes>

공식 문서에서 어떤 차이가 있어 정상 동작하지 않는지 확인하고자 하였으나 해당 페이지에는 별도의 내용이 기술되어있지 않았다.

https://reactrouter.com/docs/en/v6/components/route

React Router | Route

Declarative routing for React apps at any scale

reactrouter.com

리액트를 하면 서로 다른 js 파일끼리 스테이트나 데이터를 주고 받아야 하는 경우가 있다.

이럴 경우에 어떻게 작성하면 될지 알아보고, 리액트에서 모달창을 만들어 보자.

먼저 불러올 화면, 이동할 화면을 만든다. 

이전 장에 이어서 test3.js 파일을 만들었고 아래와 같다.

import React, { useState, useEffect,useCallback } from 'react';


function Test3({setModal,testdata}) {
   console.log(testdata)
    return (
    <div style={{width:"800px",height:"1000px",background:"purple" }}>
       {testdata.map((item,index,a)=>{
         console.log(a)
           return (<h2>{index}{item.NICKNAME}</h2>)
       })}
       <button onClick={setModal}>close</button>
     </div>
    );
  }


  export default Test3;  

위와 같은 페이지를 만들고 해당 페이지를 test1.js 에서 부르는 작업을 할 것이다.

test1.js 는 아래와 같다.

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 액시오스
import TEST3 from './test3';
function Test1() {
    const [id, setId] = useState(0);
    const [modal,setModal] = useState('')
    const [testdata,setTestdata] = useState([])
    function stateTest() {
        setId(id+1)
    }
     useEffect(
       () => {
          alert("ok")
       
       }, []
       );


    function testAxios(){
        axios(
            {
              url: '/user/test.do',
              method: 'post',
              data: {
                email:'test',aaa:'aaa222'
              } , 
              /**
               * 개발 환경에서의 크로스 도메인 이슈를 해결하기 위한 코드로
               * 운영 환경에 배포할 경우에는 15~16행을 주석 처리합니다.
               * 
               * ※크로스 도메인 이슈: 브라우저에서 다른 도메인으로 URL 요청을 하는 경우 나타나는 보안문제
               */
              baseURL: 'http://localhost:8110',
              //withCredentials: true,
            }
          ).then(function (response) {
            console.log(response.data)
            setTestdata(response.data.JavaData)
          });


    }    
    function testModal(){
      setModal('1')
    }

    return (
        <div>
        test{id}
        <button  onClick={()=> stateTest()}>test</button>
        <button  onClick={()=> testAxios()}>axiosTest</button>
        <button  onClick={()=> testModal()}>modal</button>
        {modal == "1" ?  <TEST3 setModal={setModal} testdata={testdata} /> : ''}
        </div>
    );
  }


  export default Test1;  

먼저 test1.js 에서는 import TEST3 from './test3'; 으로 test3.js 파일을 불러온다.

그리고 <TEST3 />으로 해당 파일을 불러와 사용한다.

여기까지는 이전에 사용한 Link 로 페이지를 부르는 과정과 같다.

이제 부른 페이지에 데이터를 전달해야한다.

아래와 같이 작성하여 원하는 데이터 및 스테이트 함수를 전달 가능하다.

<TEST3 setModal={setModal} testdata={testdata} />

위와 같이 작성을 하면 TEST3으로 정의 된 test3.js에서 setModal 함수와 testdata 스테이트 변수를 사용 가능하다.

test3.js에서는 해당 데이터들을 아래와 같이 받는다. 

 test3.js 에서 저렇게 받아서 넘어오는 함수 및 변수를 사용 가능하다.

나는 해당 test3.js를 모달로 만들어 사용하기 위해서 아래와 같이 코드를 작성했다.

 {modal == "1" ?  <TEST3 setModal={setModal} testdata={testdata} /> : ''}

modal 스테이트 변수가 1 이면 TEST3(test3.js) 가 보이고, modal 스테이스 변수가 1이 아니면 아무것도 보이지 않는다.

위와 같이 버튼 클릭시 setModal로 modal의 값이 1이 되어 test3.js 의 화면이 보인다

test3.js 에서 아래와 같이 setModal 함수를 받았다.

해당 함수를 close버튼에 onClick로 줘서 modal의 값을 변동시켜 모달을 사라지게 가능하다.

close 클릭시 test3.js 화면이 사라진다.

위 예제에서 setModal 만이 아니라 testdata도 함께 넘겼다. 

해당 testdata 스테이트 변수를 보면 아래와 같다.

 const [testdata,setTestdata] = useState([])

위와 같이 배열로 받을 예정이다.

위 testdata에 데이터를 백엔드(스프링)에서 받아온다.

  function testAxios(){
        axios(
            {
              url: '/user/test.do',
              method: 'post',
              data: {
                email:'test',aaa:'aaa222'
              } , 
              /**
               * 개발 환경에서의 크로스 도메인 이슈를 해결하기 위한 코드로
               * 운영 환경에 배포할 경우에는 15~16행을 주석 처리합니다.
               * 
               * ※크로스 도메인 이슈: 브라우저에서 다른 도메인으로 URL 요청을 하는 경우 나타나는 보안문제
               */
              baseURL: 'http://localhost:8110',
              //withCredentials: true,
            }
          ).then(function (response) {
            console.log(response.data)
            setTestdata(response.data.JavaData)
          });


    }    

setTestdata 를 통해서 결과가 testdata에 들어간다.

해당 testdata는 test3.js에 전달되어 해당 화면에 보여진다.

testdata 에는 객체 배열이 들어오고 해당 데이터를 map 함수로 풀어준다.

 {testdata.map((item,index,a)=>{
         console.log(a)
           return (<h2>{index}{item.NICKNAME}</h2>)
       })}

map은 배열을 끝까지 반복하는 자바스크립트 함수로 세가지 변수를 주는데 처음 변수가 각 배열의 요소를 리턴해준다.

해당 데이터에서 각 요소는 객체이므로 객체에서 NICKNAME 값을 꺼내서 h2 태그로 감싸 리턴한다.

그리하여 해당 함수를 실행하고 모달창을 켜면 아래와 같이 나온다.

스프링에서 받아 온 객체 배열의 NICKNAME 값이 화면단에 보여지는 것을 볼 수 있다.