guricode

react 프로젝트 이슈들 -2 본문

web/react

react 프로젝트 이슈들 -2

agentrakugaki 2022. 2. 23. 21:33

이번에는 Genre컴포넌트에서 foreach문을 이용하여 해당 버튼을 클릭했을때

 

같은 값의 데이터를 movie.json에서 필터링하여 보여주는 것이다.

 

 

장르부분 컴포넌트다.

 

같은 영화 데이터를 들고와서 foreach로 반복문을 돌렸다.

그리고 usestate를 이용해 doc에 접근시켰다.

 

clickbtn함수를 이용해 버튼을 클릭했을때

해당 버튼에 있는 id값과 영화데이터에 있는 장르 값이 같을 때 d라는 배열에 넣고

 

 

그 배열에 넣어진 데이터만 추출해서 화면에 뿌려줬다.

 

그리고 새로운 버튼을 클릭하면 다시 비우고 넣고 반복

 

이렇게해서

 

버튼을 클릭했을때 그 장르만 화면에 나오게 구성이 되었다.