본문 바로가기
React/React 강의 개념 정리

[React] props 를 이용해 부모의 state를 얻어 쓰자!!// 상세 페이지도 만들어보자!

by Dev dreamer 2023. 1. 20.

 

 

일단 보면 그 전까지 구상한 코드부터 살펴보자

이 컴포넌트 함수가 Main 함수이고 지금 화면을 뿌려주는 놈이다.

 

이 함수안에 

모달이라는 놈이 살고 있다.

 

이때! 자식 컴포넌트인 Modal 에게 위의 BlogMain 이 가지고 있는 state 값을 전달하고 싶으면

BlogMain에 포함되어있는 Modal 컴포넌트에서

props 로 전달할 데이터를 담을 그럴듯한 이름을 하나 짓고 그 데이터 값을 담아준다!

 

그렇게 전달한 props 의 값을 받기 위해서 자식컴포넌트에서 가장 먼저 해줘야 하는것은

props 라는 파라미터를 받아준다. 그리고 이 props뒤에 .을 붙이고 가져온 데이터를 담은 변수를 가져오면된다!

array의 데이터 값을 담은 변수의 이름 name 이 변수의 값을 props 에서 꺼내온다

props.name 과 같이.

나는 App이 아니고 BlogMain 이다

props를 통해서 background도 바꿀수 있다고?

color 'yellow' 라는 String을 보낸거다

background 를 바꿀수 있는 특정 함수를 보낸것은 아니고 원하는 색상의 이름을 props를 통해서 보낸것이다.

 

 

숙제!

 

여기서 글수정 버튼은 Modal 창에 있으므로 아마도 props로 useState의 set함수를 가져와서 수정하는듯 하다.

 

내코드

일단 나는 기존에 가져왔던 제목에 그 제목을 바꿀수 있는 setArray 도 가져왔다.

 

그리고 새로 선언한 array 라는 변수에 기존에 가져온 배열의 새 화살표를 넣어줬다(set 함수에서 인식하도록)

그리고 그 화살표가 가르키는 주소의 첫번째 배열을 '여자 코트 추천' 을 담아준 후에

그 화살표 주소를 다시 setArray를 통해 적용시켜줬다!

 

BlogMain(부모클래스) 부분에 일단 정상적으로 배열이 들어간것은 확인을 했다.

 

그런데 이전 수업에 배운 Map 을 통해서 출력한 것 때문인지 글 수정 버튼을 누르면 화면에 아무것도 안뜬다.

setArray에 새 주소를 담아서 array에 전달했는데 왜 인식을 못하는거지..

 

이런 에러가 뜨는데 Map 이랑 연관이 있는거 같음.

이러한 해결책이 있다고하는데 .. 난 array 인데 ?? 뭐지.. 해결되면 다시 수정하러 오겠다..

 

 

오류난 이유!!!

 

대괄호로 넣어줘야 한다.. 그런데 궁금한게 왜 좋아요 배열에서는 값이 그대로 전달된건지 의문인듯..

 


강사님의 숙제

각 블로그의 제목을 클릭하면 해당 제목을 갖은 모달창이 뜨게 하여라!

 

 

일단 map을 통하여 화면이 뿌려지는 상황이므로

 

각 요소들의 index 값을 이용해 제목역시 index를 통해 화면에 표시되므로 인덱스 값을 전달해 주면 된다.

 

인덱스 값을 받아서 보내줄 useState를 우선 선언해주고

 

 

해당 인덱스 값을 기준으로 모달창 컴포넌트에 전달된 array 제목값들을 인덱스를 통해서 불러오면 된다.

 

여기서 익명의 함수를 바로 넣을때 !!

; 를 기준으로 여러개의 기능들을 동시에 넣을 수 있으니 참고!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의  9강, 10강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.

 

 

출처:React 실행오류 Array.map is not a function (tistory.com)

댓글