[React.js]Link로 props 전달하기

내가 어떤 페이지에 특정 데이터를 전달하고 싶은 경우, react에서는 일반적으로 부모자식 관계로 설정해서 props를 전달하게 된다. 

하지만 만약 부모자식 관계가 아닌데도 props를 전달해야 할 필요가 있을 경우에는 어떻게 데이터를 전달할까..

결론은 Link 컴포넌트를 이용하면 된다. 

 

아래와 같은 경우를 생각해보자.

Router.js가 아래와 같이 구성되어 있고, 

// Router.js
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Main from "./pages/Main";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

Home.js는 아래와 같이 로그인/회원가입 버튼을 누르면 /main 경로로 할당된 Main.js 컴포넌트로 가게끔 되어있다. 

// Home.js
import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <Link to="/main">
        <button>로그인</button>
      </Link>
      <Link to="/main">
        <button>회원가입</button>
      </Link>
    </div>
  );
}

export default Home;

그런데 Main.js안에는 아래 사진 및 코드와 같이 useState를 사용해서 초기값을 true로 설정을 해줘서 Main.js가 렌더링 되면 무조건 SignIn.js가 렌더링 되게 되어있다.

Home.js에서 로그인 버튼을 누르면 로그인으로 페이지가 열리고, 회원가입 버튼을 누르면 회원가입 페이지가 열리게 하고 싶은데, 

만약 Home.js와 Main.js가 같은 페이지였다면, 부모자식 간에 props를 전달하는 방법으로 손쉽게 해결이 될 것 같다. 그런데 이 경우는 아예 다른 페이지이기 때문에 기존 방법으로는 props를 넘겨줄 수가 없다. 

// Main.js
import { useState } from "react";
import "./Main.scss";
import SignIn from "./SignIn";
import SignUp from "./SignUp";

function Main() {
  const [isLogin, setIsLogin] = useState(true);

  const onClickSignIn = (event) => {
    setIsLogin(true);
  };
  const onClickSignUp = (event) => {
    setIsLogin(false);
  };
  
  return (
    <div className="loginContainer">
      <div className="btns">
        <button className="btn" onClick={onClickSignIn}>
          로그인
        </button>
        <button className="btn" onClick={onClickSignUp}>
          회원가입
        </button>
      </div>
      {isLogin ? <SignIn /> : <SignUp />}
    </div>
  );
}

export default Main;

해결방법은 Main.js 파일의 isLogin state 초기값인 true를 Home.js의 회원가입 버튼을 눌렀을 땐, false로 변경되게끔 수정해주면 된다. 

즉, Home.js의 회원가입 버튼에 state false값을 실어보내주면 된다.

// 수정된 Home.js
import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <Link to="/main">
        <button>로그인</button>
      </Link>
      <Link to="/main" state={{ signUp: false }}> // 수정된 부분(객체로 값을 전달해준다.)
        <button>회원가입</button>
      </Link>
    </div>
  );
}

export default Home;

// 수정된 Main.js
import { useState } from "react";
import { useLocation } from "react-router-dom"; // 추가된 부분
import "./Main.scss";
import SignIn from "./SignIn";
import SignUp from "./SignUp";

function Main() {
  const location = useLocation(); // 추가된 부분
  const signUp = location.state?.signUp; // 추가된 부분

  const [isLogin, setIsLogin] = useState(signUp === false ? false : true); // 수정된 부분

  const onClickSignIn = (event) => {
    setIsLogin(true);
  };
  const onClickSignUp = (event) => {
    setIsLogin(false);
  };

  return (
    <div className="loginContainer">
      <div className="btns">
        <button className="btn" onClick={onClickSignIn}>
          로그인
        </button>
        <button className="btn" onClick={onClickSignUp}>
          회원가입
        </button>
      </div>
      {isLogin ? <SignIn /> : <SignUp />}
    </div>
  );
}

export default Main;

 

결과는 아래와 같다.