part.2 Ajax 요청방법 & 숙제 풀이에서 잘문이 있습니다!!

안녕하세요 애플님.  저는 이전에 상품에 대한 컴포넌트를 만들때,  map 반복문을 통한 상품리스트 출력 또한 컴포넌트에 다 넣어서 1번 ,2번 과 같은 코드를 작성하였습니다. 지금까지는 아래와 같이 컴포넌트화 시켜서 App()컴포넌트에 넣어서 잘 돌아갔습니다.

그리고 이제 Ajax를 통해 데이터를 더 가져와서 state배열에 추가해주는 과정에서 궁금증이 생겼습니다.

코딩애플님의 경우 App()안에 작성하 였으니  다음과 같은 코드를 작성하셨습니다.

shoes변경([...shoes, ...result.data ]);

하지만  저는 axios 코드 또한 Shoes 컴포넌트 안에서 실행하였고 부모 컴포넌트인 App()에서 받아오기 위해  다음과 같이 props를 붙여주었습니다. 작성 후에 에러가 뜨지는 않지만, 더보기 클릭시 데이터가 출력되지는 않습니다.

props.shoes변경([...props.shoes, ...result.data ]);

제 생각엔 지금까지는 부모(App)컴포넌트에서  props로 잘 받아 와서 Shoes컴포넌트에서 state를 사용하였고,  위의 경우도 props로 배열을 가져온 것까지는 된거 같습니다. 그리고 배열에 추가된 데이터가 들어갔는데,  추가된 바뀐 shoes state를 다시 App()에서 출력하게 되어있으므로 출력이 안되는걸까요?

즉, 데이터가 위에서 아래로 흘러야 하는데,  아래에서 추가한게 생기고 위로 다시 역류한 느낌? 그래서 출력은 안되는 느낌? 인거 같은데... 맞을까요?

그리고 이럴 경우는 해결방법이 있는지, 그리고 저처럼 모든 기능을 컴포넌트화 시키는 것은 안좋은 방법인지 궁금합니다. 

1. ----------------------------------------------------------------------------------------

function Shoes(props){
return(
<div className='container'>
<div className='row'>
{
props.shoes.map((a,i)=>{
return(
<div className='col-md-4' key={i}>

<h4>{props.shoes[i].title}</h4>
<p>{props.shoes[i].content}</p>
<p>{props.shoes[i].price}</p>
</div>
)
})
}
 
</div>
<button className='btn btn-primary' onClick ={()=> {

axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{
 
props.shoes변경([...props.shoes, ...result.data ]);
})
.catch(()=>{ })
}}>더보기</button>
</div>

2. ----------------------------------------------------------------------------------------

function App() {

let [shoes,shoes변경] = useState(Data);

return (
<div className="App">
 
 
<BrowserRouter>

<Navigation></Navigation>
{/* 메인페이지 */}
<Switch>
<Route exact path="/">
<Post></Post>
<Shoes shoes={shoes}></Shoes>
</Route>

{/* 상세페이지 */}
<Route path="/detail/:id">
<Detail shoes={shoes}></Detail>
</Route>

 
</Switch>
</BrowserRouter>
</div>
);
}