[TIL_개발일기_210315] withRouter는 언제 사용할까? / history.push()

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다. 

withRouter는 언제 사용할까?

 

커뮤니티 게시판에서 회원가입 폼에 정보를 입력하고, 회원가입하기 버튼을 눌렀다면 메인 페이지로 넘어가게 된다. 이렇게 리액트에서 페이지를 이동할 수 있는 것은 'react-router-dom'을 이용해 페이지의 기록을 알 수 있기 때문이다. 

 

Router로 컴포넌트의 path와 라우팅할 컴포넌트를 정해줄 수 있는데, 해당하는 Router는 props를 통해 history 객체를 전달 받게 된다.

 

<Router>
            <Switch>
                <Route exact path="/" component={Auth(LogOutMain, false)} />
                <Route exact path="/login" component={Auth(LogInPage, false)} />
                <Route exact path="/signup" component={Auth(SignUpPage, false)} />
                <Route exact path="/main" component={Auth(Main, true)} />
                <Route path="/*">404 Not Found</Route>
            </Switch>
</Router>

 

history 객체는 goBack(), goFoward() 등 앞/뒤로 이동할 수 있는 메소드 등 다양한 메소드와 관련 객체가 있다. 

 

그 중 라우팅 변경을 위해 가장 빈번히 사용되는 메소드가 바로 push이다. 아래의 코드처럼 이동하고자 하는 path를 history.push 안에 넣어주면, 원하는 경로(컴포넌트)로 이동 가능하다. 

 

history.push('/main');

 

그래서 나도 '회원가입하기' 버튼을 눌렀을 때 메인페이지로 이동하게 하고자 history.push를 사용했으나 꿈쩍도 하지 않는 것이다. 

 

const onSubmitForm = useCallback(() => {
        dispatch(registerUser({ role, phone, nickname }));
        props.history.push('/main');
}, [role, phone, nickname]);

 

 

이유를 찾아보니, '라우터가 아닌' 컴포넌트에서 history(나 location, match)와 같은 라우터에서 사용하는 객체를 쓰려면 withRouter라는 HOC을 사용해야 한다. 'react-router-dom'에서 'withRouter'를 import하고, export 하는 컴포넌트를 withRouter로 감싸주면 된다. HOC은 어제도 배웠지만, 컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴하는 함수이다. 

 

import { withRouter } from 'react-router-dom';

const SignUpPage = (props) => {
	// ,,,,

    const onSubmitForm = useCallback(() => {
        dispatch(registerUser({ role, phone, nickname }));
        props.history.push('/main');
    }, [role, phone, nickname]);

    return (
        <Center>
            <form onSubmit={onSubmitForm} aria-label="회원가입 폼입니다.">
                // ,,,,,
                <Button type="submit">회원가입하기</Button>
            </form>
        </Center>
    );
};

export default withRouter(SignUpPage);