[TIL] React 함수형 Component 상태 올리고 내리기

글을 조금 편하게 쓰기 위해 부모 Component와 자식 Component는 부모/자식으로 쓰도록하겠다.

리액트를 쓰게되면 부모가 값을 전달하고 자식은 그 값을 사용하는 게 일반적이지만 반대로 자식이 부모에게 데이터를 올릴 수는 없는 걸까?

한 페이지에서 데이터를 받아 왔고 어떠한 버튼을 누르게 되면 페이지가 전환되면서 데이터를 보여주는 방식을 바꾸려고 한다. 하지만 주소가 변경되는 것이 아닌 보여주는 것만 다르게 하고 싶었는데, 보여주는 것까지는 state를 내리는 걸로 해결이 가능했지만 하고자 하는 것은 자식컴포넌트에서 버튼을 누르게 되면 돌아오게끔 하고 싶었다.

지금 하려는 게 맞는 방법인지는 모르겠지만, 일단 해결을 위해서는 함수형 Component에서 State를 올리는 방법으로 접근을 하였다.

일단 props를 넘겨주는 과정(즉, 부모가 자식에게 전달)은 이와 같다. name에는 stat 이라는 것을 넘기고 RoutineCards는 likedRoutine 이라는 것을 넘긴다. 

자식은 이와 같이 props로 받게 되며, props에서 주어지는 것에는

props.RoutineCards로 전달받은 데이터는 RoutineCard로 이루어진 배열이다. 그래서 코드 윗부분에는 interface를 이용하여 RoutineCard의 내용을 정의했고, 비슷하게 

props.name 으로 전달받은 걸 확인하여 헤더로 나타내는 부분을 달라지게끔 만들었다.

이러한 방법으로 state를 내려받으면 이와 같은 형태로 쓰면 된다.

 

그럼 이제 본격적으로 state 올리는 과정은 어떻게 해야할까??

우선은 자식을 보게되면, 

1. useState로 props.name 이라는 상태를 받아와서 goPrev에 정의한다.

2. onClick을 통해 goPrev의 이름을 교체하도록 한다.

3. onChange를 통해 props.onChange(goPrev)로 변경됨을 알려준다.

 

그 다음 부모를 보게 되면 

1. 자식 State에서 onChange를 이용

2. useEffect를 사용하여 setStat을 변경

 

처음에는 onChange 에서 바로

onChange={value => setStat(value)}

로 적용을 하려고 했으나, 렌더링하는 과정에서 문제가 발생되었다.

Cannot update a component (`UserProfile`) while rendering a different component (`LikedRoutine`). To locate the bad setState() call inside `LikedRoutine`, follow the stack trace as described in

위와 같은 오류가 뜨게 되었고, useEffect를 이용하여 해결을 하였다.

 

생각하는 대로 만들다보니 자꾸 문언가 문제점이 발생하고 하루하루 구글링을 통해 해결을 해야하는데, 생각보다 문제를 해결하는 과정이 나름의 재미를 주고 있는 거 같아서 부족한 부분과 더 확실히 알아야 되는 것을 알아가는 것 같다.

 

onChange, useEffect 의 정확한 역할을 잘 모르는데, 이 부분은 제대로 짚고 넘어가야 될 거 같다.