7 글 보임 - 1 에서 7 까지 (총 7 중에서)
-
글쓴이글
-
2023년 5월 24일 01:59 #84355
치칫참가자리액트 라우터 부분에서 <Route path="/" element={ <> <div className="main-bg"></div> <div className='container mt-5'> <div className='row'> { shoes.map((a,i)=>{ return( <List shoes={shoes[i]} imgCount={1+i} /> ) }) } </div> </div> </> }/> 부분을 따로 컴포넌트로 빼서 만들고싶은데 이게 이미 List 라는 컴포넌트가 있어서 그런지 이것저것 해봤는대 오류만 나더라구요.. 감이 안잡혀서 컴포넌트 중첩 or 컴포넌트 안에 컴포넌트 넣기 이런식으로 검색해서 글들 봐도 잘 이해가안되서 힌트좀 주실수있을까요?.. ㅠㅠfunction List(props){ return( <div className='col-md-4'> < img src={'https://codingapple1.github.io/shop/shoes' +props.imgCount + '.jpg'} width="80%"/> <h4>{props.shoes.title}</h4> <p>{props.shoes.price}</p> </div> ) }list 컴포넌트는 이렇습니다
2023년 5월 24일 10:36 #84374
치칫참가자//detail.js 의 상단부에 적은것 import List from './../App'; // app.js 있는 list 컴포넌트 function List(props){ return( <div className='col-md-4'> < img src={'https://codingapple1.github.io/shop/shoes' +props.imgCount + '.jpg'} width="80%"/> <h4>{props.shoes.title}</h4> <p>{props.shoes.price}</p> </div> ) } // detail.js 에 있는 main 컴포넌트function Main(props){ return( <> <div className="main-bg"></div><div className='container mt-5'> <div className='row'> { props.shoes.map((a,i)=>{ <List shoes={props.shoes[i]} imgCount={1+i} /> }) } </div> </div> </> ) } // app.js 에 있는 main 컴포넌트 불러오는것 <Main shoes={shoes}/> 이렇게 작성하니깐 map 반복문이 안돌아가네요 list만도 아예 출력이 안되는것같아요 import할때 app.js 에서 export를 안해서 그런가해서 export default App; 을 export {App,List}; 로 export 할려고하면 오류가 무조건 나는것 같더라구요 그래서 js파일을 하나 더 만들어서 거기다가 list 컴포넌트를 만들고 그걸 detail.js에 임폴트하면 되나라고 생각해서 해보려고 생각하니깐 새로운곳에 만들고 app.js에 <List shoes={shoes}/>라는 식을 넣을수가 없는것같아서 성립이 안되는것같아서 다른건 정상적으로 출력되는데 map부분에서만 생성이 안되고있는것같은데 이유를 모르겠네요 ㅠ return()을 맵안에 넣을때 아예 멈춰버리고 리턴을뺴면 다른건 잘 동작하는데 map이 동작이안하네요2023년 5월 24일 11:26 #84381
치칫참가자컴포넌트에 컴포넌트 넣기는 list에 변수가 있어서 그런지 도저히 하는법을 모르겠어서 <List shoes={shoes} imgCount={1}/>function List(props){ return( <> <div className="main-bg"></div> <div className='container mt-5'> <div className='row'> { props.shoes.map((a,i)=>{ return( <div className='col-md-4'> < img src={'https://codingapple1.github.io/shop/shoes' +parseInt(props.imgCount+i) + '.jpg'} width="80%"/> <h4>{props.shoes[i].title}</h4> <p>{props.shoes[i].price}</p> </div> ) }) } </div> </div> </> ) } 그냥 리스트하나에 다담는식으로 해서 하긴했는대 근본적으로 이미 있는 리스트 컴포넌트를 새로만든 컴포넌트 안에넣어서 하고싶었는대 list에는 이미 props한 스테이트가있었고 그걸 또 shoes를 props한 컴포넌트에 넣을수있는건가요? 위에 글에 대충 어케했는지는 나와있는데 이게 결국은 다 하나로 만드는게 맞는건지 변수가 없는 컴포넌트에 변수없는 컴포넌트 넣기 실험은 잘 성공했습니당... 죄송합니다 이상한 질문만해서... ++그리고 리액트가 제가 코드를 잘못 오류로 칠때마다 그냥 멈춰버리고 X버튼으로도 안꺼져서 강제종료해서 모든 인터넷창을 다끄고 서버에서 다시 npm start를 쳐서 계속 다시 켜야하는 번거로운 상황이 계속나오는데 이게 정상인가요? 너무 번거롭네요 계속 오류날때마다 이걸 반복하면서 계속 고쳐야하니까...2023년 5월 24일 15:03 #84400
codingapple키 마스터컴포넌트마다 파일하나에 담읍시다 안되는건 에러메세지 잘살펴보면 됩니다 자식컴포넌트에서 부모에 있던거 쓰려면 props로 보내줍시다 무한재렌더링같은 에러가 아니면 보통 멈추진 않습니다
-
글쓴이글
7 글 보임 - 1 에서 7 까지 (총 7 중에서)
- 답변은 로그인 후 가능합니다.