onClick과 const를 이용해서 페이지 이동 버튼을 만들자.

리액트에서 버튼에 route를 걸어서 페이지를 이동하는 방법도 있지만 상황에 따라 버튼에 onclick으로 const를 호출해서 페이지를 이동해야 하는 경우가 생깁니다. route말고 어떻게 해야 설정가능한지 살펴보도록 하겠습니다.

1. const설정

우선 onClick을 통해 호출할 const명을 정해야 합니다. 여기서는 "clickMe"라는 이름으로 만들도록 하겠습니다. 그리고 메인 페이지의 루트는 '/'이라고 하겠습니다.

const clickMe = () => {

    document.location.href('/')

}

위 소스를 보면 clickMe이라는 명칭을 갖는 const를 화살표 형식으로 써서 document.location.href()를 작동시키게 만들었습니다. 이렇게 하면 route가 '/'인 곳으로 이동할 수 있는 기능을 갖추게됩니다.

2. 버튼에 onClick달기

예전에는 다른 방식도 많이 사용했지만 요즘은 버튼 태그를 이용해서 버튼을 만드는 경우가 대부분인 듯 합니다.

<button onClick={clickMe}>누르세요</button>

버튼 태그는 별 다른 설정 없이도 브라우저 상에서 적당히 예뿐 형태로 버튼을 표현해줍니다. 그 안에 들어간 '누르세요'라는 글의 크기에 맞춰 버튼 크기도 달라지게 됩니다. 버튼 속성으로 onClick을 넣었고 호출하는 것은 clickMe입니다.

3. 컴포넌트 형식

위 내용을 component에 작성하는 예시를 보도록 하겠습니다. 컴포넌트 작성방법 중 function/return을 사용하는 방식으로 쓰겠습니다.

import { React } from "react";

import { button } from "semantic-ui-react";

   const clickMe = () => {

       document.location.href('/')

   }

   return (

      <>

      <button onClick={clickMe}>누르세요</button>

      </>

   );

}

export default HeyClickHere;