오늘의 오류
[Error #2] 일주일 평점 남기기 undefined를 곁들인
삐옹
2022. 5. 25. 00:04
상황
props로 넘겨준 요일들이 자식으로 하나씩 잘 넘어가 화면에 오늘부터 일주일 간의 요일이 뜨면 완성인데
왠걸 요일도 없는 평점, 버튼 UI 끝 자리를 차지하고 있다.
props로 넘겨줄 데이터가 부모 컴포넌트에서 제대로 찍히는가?[o]
props로 받은 데이터가 자식 컴포넌트에서 제대로 받았는가?[x]
-> 갑분언? 갑자기 분위기 undefined란 뜻임.
해결
대체 저 undefined가 뭘까 고민을 해보았다.
개발자도구에 들어가 element를 살펴보니
감싸준 div의 밖에 있다고 나온다.
그렇다면 div 태그 아래에서 문제가 났음에 틀림없었다.
div 태그 아래에 있는건 Route 2개 뿐이다.
// 실패
return(
<Container className="App">
<h1>내 일주일은?</h1>
<div>
{DayList.map((day, idx) => <Home key={idx} day={day}></Home>)}
<div/>
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/review" component={Review}></Route>
</Switch>
</Container>
)
수상함을 느끼고
Route안에 map을 넣었더니
원하는 화면이 나왔다.
// 성공
//Home컴포넌트로 props를 보내주는 map 함수를
//Route안에서 컴포넌트로 props를 보내주기 위한 속성인 render 안에 콜백함수로 넣어줌
return(
<Container className="App">
<h1>내 일주일은?</h1>
<Switch>
<Route path="/" exact render={(props) => (DayList.map((day, idx) => <Home key={idx} day={day}></Home>))}></Route>
<Route path="/review" component={Review}></Route>
</Switch>
</Container>
)
map 함수 Route안에 넣어주어서 해결!
컴포넌트와 라우트를 따로보고 생긴 문제였다.
루트페이지에 있으면 Home컴포넌트를 보여달라는 코드가 있었으니
처음 화면처럼 나오는게 맞을 수 밖에.
넘어가는 props값이 없으니까 요일은 없는게 당연하다
정리
- 라우트랑 컴포넌트를 따로 보지말자