next.js에서 하나의 페이지에 여러 컴포넌트 갈아끼워지는것처럼 만들기 / 리액트 라우터돔처럼 컴포넌트 갈아끼워주기

 

 

그동안 리액트로 작업을 할땐 router를 이용하는 방식을 썼는데, 이런식으로 라우터라는 js 폴더를 만들어서 Route 안에 element 속성으로 컴포넌트를 끼워주었었다.

 

next.js를 사용하면서 로그인 페이지를 페이지는 하나만 쓰고, 컴포넌트를 갈아끼우는 방식으로 사용하려고 했는데

pages라는 폴더에서 페이지를 생성한 뒤 데려오는 방식만 알다가

(React에서 react-router-dom의 라우팅은 CSR을 제공하고 Next에서 제공하는 File System의 라우팅은 SSR을 제공)

리액트라우터돔없이 컴포넌트를 데려오려하니 갑자기 멍- 해졌었다

 

우선적으로 하나의 페이지에서 컴포넌트를 갈아끼워주는걸 해주고 싶었기에 튜터님의 힌트를 통해 state 하나를 만들어서 아래처럼 컴포넌트를 갈아끼워지는것처럼 보이도록 만들었다.

const LoginPage = () => {
    const [status, setStatus] = useState("login");
    return (
        <div>
            Login Page입니다.
            {status === "login" && <Login />}
            {status === "signUp" && <Register />}
            {status === "searchPW" && <Header />}
            <button
                type="button"
                onClick={() => {
                    setStatus("signUp");
                }}
            >
                회원가입하기
            </button>
            <button
                type="button"
                onClick={() => {
                    setStatus("searchPW");
                }}
            >
                비밀번호 찾기
            </button>
        </div>
    );
};

export default LoginPage;

 

요런식으로 로직 작성하면 되지롱

(이 코드의 회원가입하기랑 비밀번호 찾기는 추후 Login이라는 컴포넌트로 이사를 갔다고 한다 총총)