wafflestudio/seminar-2020

자식 컴포넌트에서 부모 컴포넌트의 state를 업데이트하기

Opened this issue · 2 comments

저는 지금 두 가지 문제를 해결하려고 하는데요,

  1. 자식 컴포넌트에서 부모 컴포넌트의 state 변경하기
    Modal 대신 그냥 html 코드로 목록에 추가하는 코드를 만들어 놓았기 때문에, List라는 목록 추가용 컴포넌트에서 submit 버튼을 눌렀을 때 App.js에서 이 List가 사라져야 합니다.

그런데
스크린샷 2020-09-27 오전 4 10 33
이렇게 id, name... 등의 내용은 부모로 보냈지만 부모에서 어떻게 이를 구현할지 잘 모르겠습니다

  1. 좋아요 버튼

좋아요 버튼은 당연히 하나의 컴포넌트 내에 있는데, 이와 관련된 (좋아요 개수)값을 전달하기 위해 전역변수 등 다양한 방법을 시도해 봤지만 안됐습니다..

스크린샷 2020-09-27 오전 4 56 58

왠지 너무 근본적인 두가지를 못하고 있는 것 같은데... 조언을 부탁드립니다.

package.json 파일이 올라와있지 않아 직접 확인하지는 못했습니다.
따라서, 정확하지 않을 수 있다는 점도 생각해주세요!
package.json 파일도 커밋해주세요!!

일단 부모로 보내는 부분에는 문제가 없어보이는데,
object를 전달할 때는 직접 전달하기 보다, 아래처럼 새로 object를 만들어서 전달합니다.
이 부분이 문제가 되어보이지는 않는데, 일단 알아두셨으면 합니다.

this.props.onCreate({ ...this.state })
const {information} = this.state.information;

App.jshandleCreate함수를 보면, 위와 같은 부분이 있습니다.
위와 같이 하면, state 안의 information에서 information을 찾는 꼴이 됩니다.
state안에서 바로 information을 찾으려면 아래와 같이 해야합니다.

const {information} = this.state;

이 부분에서 에러가 나서, 꼬인것이 아닐까 싶습니다.

좋아요 기능에 대한 제 의도는 최상위 컴포넌트에 개수를 state로 저장하고,
props를 통해 버튼을 누를 시 작동하는 함수를 전달하는 것입니다.
context를 사용해서 전역으로 관리할 수도 있지만, 과제를 낼 당시에는
알려드리지 않았던 부분이라 일단 제 의도는 위와 같았다고 말씀드리고 싶어요

혹시 pacakge.json파일 커밋하시고 댓글 다시면 다시 확인해보겠습니다.

네 감사합니다 커밋해 보았습니다!