선생님 살려주세요

[배희창]

현재 포폴 제작중인데 서버에서 받아온 데이터를 어떻게 쑤셔박아야할지 고민입니다.

그 ajax 요청하는거도 알고, 어찌 박는지도 압니다만 구조설계를 하는 법에 대해서 팁좀 주실수 있겠습니까

새벽부터 구글링하고 강의 다시보고 하는데 이제 생각이 너무많아서 제가 어려운길로 돌아가나 싶습니다.

진짜 정말 토하기 직전까지 찾아보고 수정하다 안되서 질문드립니다.



본론으로 들어가면 하단과 같이 그냥 평범한 이미지 게시판입니다.

데이터는 임시로 data.js라는 파일을 따로 만들어서 어레이 형식으로 
{ id: 1, title: 'Leobinus', subtitle: 'stdo uno', src: 'https://naver.github.io/egjs-infinitegrid/assets/image/1.jpg' }
잠시 더미 데이터를 넣어놨고, node로 서버 db 다 만들어 놓은 상태입니다.




/ or /all 방문시  <Posts /> 컴포넌트는 db 전체의 글들을 데이터 가져와서 생성
/editorial 방문시 <Posts /> 컴포넌트는 db에서 항목이 editorial 인거만 가져와서 생성.
나머지도 그냥 <Posts /> 단일 컴포넌트가 반복되는 구조입니다. 헌데

이 데이터를 ajax로 요청하면 쿼리가 3~4개잖아요 선생님
그니깐 editoral 페이지에는 editoral 조회한 데이터 넣어줘야하고
commercial에는 commercial로 가져온 데이터 넣어주는 식으로요!?


일단 제 생각으로 오늘 삽질한 과정이

서버는 app.get(/editoral) 하면 editorial 자료만 보내주는 api를 만들어놨으면

app.js에서
let [data, setData] = useState('') 하나 존재,
let [tab, setTab] = useState('')  뭐 이런데다가

네비바에서 editoral 탭을 누르면
setㅆab(editoral) 이라고 만약에 tab 값을 바꾸고

axios.get('/tab스테이트').then((결과)=>{
        setData(결과)
        })

뭐 이런식으로 data스테이트에 서버데이터를 쑤시고?

<Posts data=[data] />

이런식으로 넘기면 네비바 탭누르면 그 탭값으로 서버한테 ajax 요청하면
posts 컴포넌트 하나로 자료만 다른 페이지 서너개를 소환하는걸 생각했는데

자식->부모 스테이트 패륜전송 안되니깐 redux 깔아서


저 함수를 네비바에서 누르면 탭값이 바뀌게 해놨습니다.

근데 탭을 누르면 탭값은 바뀌는데 저 테스트로 넣은 a스테이트에 탭값을 넣어서 posts로 테스트 전송하면

a값이 출력되고 바뀌지 않습니다. 그니까 ajax로 요청을해도 탭값으로 요청하는게 아니라 원래 a값으로 요청하는거같은데

여기서부터 뭔가 구조설계가 망했다 싶어서 문의드립니다.

다른 생각해본 방안은 그냥 data.js파일에서 get요청 따로따로 날려서 변수에 담고 posts컴포넌트도 따로따로 3개 만들어서

각각 페이지마다 박아넣기를 생각해봤는데 이건 리액트적인 방법이 아닌거같아서 질문드립니다.

길이서 죄송합니다 선생님

한줄요약

서버에서 데이터받아온거 하나의 컴포넌트에 각각다른데이터로 페이지 3개만들려면 어찌합니까?

선생님 이거 다만들면 돈준대요 얼른만들고 기프티콘쏴드리고싶어요 도와주세요

[codingapple]

자바스크립트로 현재 url 가져올 수 있습니다
url 바뀔 때 마다 그 url로 ajax요청하라고 코드짭시다

[배희창]

  let [a, seta] = useState();
  let b = window.location.pathname;
  useEffect(()=>{seta(b)})

<Route path="/editorial" element={<Posts a={a} />} />

이러니깐 a값이 없던게 랜더전에 바뀌어서 editoral이 들어갔습니다 선생님 진짜 개감사드립니다 큰절올립니다
이제 저걸 ajax로 요청형식으로만 바꾸면 알아서 url인식해서 get요청 자동데이터받아오기 삽가능인가요??
진짜감사합니다 굽신굽신

[codingapple]

useEffect 뒤에 [b] 이런거 넣어두면 될듯요

[글쓴이]

글