React-Redux (mapStateToProps(ownProps) vs useParams( ) )

이번시가은 mapStateToProps 에 2번째 파라미터 ownProps 와

 

React Hooks 에 usuParams( ) 를 알아보겠습니다.

 

<App.js  파일>

 

 

 

<ToDo.js 파일 >  

 

 

ToDo 파일에 li 태그안에 text 를 클릭시 Link 에 지정해놓은 경로,  Detail 컴포넌트로 이동이됩니다.

Detail 컴포넌트 url 에는 id 값이 묻어서 같이 넘어오는데,

hello 클릭

id넘버가넘어옮

1) useParams( ) 를 이용하면 이렇게 id값을 얻어낼수있습니다.

2) mapStateToProps( state , ownProps) 중 두번째 파라미터 ownProps 를 이용해도 id값을 쉽게 얻을수있습니다.

 

 

콘솔에 ownProps 를 찍어보면 아래와 같은 정보를 얻을수있습니다. 그중 match 에 params 를 보시면 id가있습니다.

다시 console.log(ownProps.match.params.id) 를 찍어보면 id 값인 1646045867301 를 얻을수있습니다.

이를 이용하여 데이터중 해당 id 를 가진 데이터에 접근할수 있습니다. 

 

이상입니다.

 

--잘못된 부분이 있다면 댓글 부탁드립니다 --