[React] a태그 사용해서 페이지 이동 및 함수 호출하기-떽떽대는 개발공부

2021/01/01 - [React] - [React] Component 에서 State 사용하기

[React] Component 에서 State 사용하기

 

 

 

a 태그 사용으로 페이지 이동

페이지 이동을 구현할 때 가장 일반적으로 사용하는 것이 바로 a 태그이다.

react 에서도 아래와 같이 a 태그를 이용하여 페이지 이동이 가능하다.

 

src/components/App.js

import React from 'react';

class App extends React.Component {
    render(){
        return  (
            <div>
                <a href="http://www.naver.com">link click</a>
            </div>
        );
    }
}

export default App;

출력물

위와 같이 출력물이 나타나고 링크 클릭 시 네이버 홈화면으로 이동할 수 있다.

링크 클릭 시 함수를 호출하려면 아래와 같이 onClick 이벤트를 사용하여 함수를 호출해도 결과값은 동일하다.

 

src/components/App.js

import React from 'react';

class App extends React.Component {
    openLink(){
        let pageUrl = 'http://www.naver.com';
        document.location.href = pageUrl;
    }

    render(){
        return  (
            <div>
                <a href="javascript:void(0);" onClick={this.openLink}>
                    link click
                </a>
            </div>
        );
    }
}

export default App;

 

onClick 이벤트를 사용하기 위해 href로 페이지 이동을 막기 위해 "javascript:void(0)" 을 기재해준다.