[웹1팀] [React] Link를 통해 props를 전달하는 방법

게시판의 Update 기능을 구현하던 도중, 수정 버튼을 누르면 게시글 수정 페이지로 이동하면서 작성 폼에 내가 수정하려는 글이 입력되어 있었으면 좋겠다는 생각이 들었다.

그러면 어떻게 내가 수정하려는 글의 정보를 수정 페이지에 전달할 수 있을까 고민하다가 두가지 방법을 생각해냈다. 첫번째 방법은 수정 페이지에서 API 요청을 보내는 것이고, 두번째는 어떻게 어떻게 props로 전달하는 방법이다. 첫번째 방법은 되게 비효율적이라고 생각해서 두번째 방법으로 구현하기로 결정했다.

<Link to={{`/update/${this.state.article.id}`} info={this.state.article}>
	<button className="btn btn-secondary" style={btnStyle}>수정</button>
</Link>

위처럼 Link 안에 props로 전달하면 /update/:id에 프롭스가 전달될 줄 알고 이렇게 작성했는데, this.props.info로 체크해보니 아무것도 받아와지지 않았다. 그래서 찾아보니, Link를 통해 데이터를 전달하는 방법은 따로 있다고 한다.

<Link to={{
	pathname: `/update/${this.state.article.id}`,
		state: { // 오.. 새 기술이다
        title: this.state.article.title,
        name: this.state.article.name,
        body: this.state.article.body
    }
}}>
	<button className="btn btn-secondary" style={btnStyle}>수정</button>
</Link>

위처럼 pathname에 목표 url을 지정하고, state에 내가 전달하려는 데이터를 집어넣으면 된다.

받을 때는 this.state.location.state.(key 이름)으로 접근하면 된다!