[Error #2] 일주일 평점 남기기 undefined를 곁들인

상황

props로 넘겨준 요일들이 자식으로 하나씩 잘 넘어가 화면에 오늘부터 일주일 간의 요일이 뜨면 완성인데

왠걸 요일도 없는 평점, 버튼 UI 끝 자리를 차지하고 있다.

props로 넘겨줄 데이터가 부모 컴포넌트에서 제대로 찍히는가?[o]

props로 받은 데이터가 자식 컴포넌트에서 제대로 받았는가?[x]

-> 갑분언? 갑자기 분위기 undefined란 뜻임.

 

해결

길이가 7인 배열을 map돌린거라 undefiend가 뜨면 안되는데?

대체 저 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값이 없으니까 요일은 없는게 당연하다

 

 

 

 

정리

• 라우트랑 컴포넌트를 따로 보지말자