[React.js] 로컬 json 파일에서 단일 데이터 불러오기 (에러기록용)

 

로컬 json data 파일을 이용해 포트폴리오 사이트를 만드는 중에 뭔가 이상한 점을 발견했다.

 

난, 단일 데이터를 가져오는 페이지에서 파람값으로 id 를 전달해주었고, 

파람 id 와 json data id 값이 일치하면 데이터가 뿌려지도록 작성을 해주었었다.

 

const Component = ({id}) => {
  
  return(
    <div>
      {jsonData.map((item) => (
          <div key={item.id}>
            {id == item.id ? <div id={item.id} />나는 예시예요 ㅎㅎ</div> : null}
          </div>
        ))}
    </div>
  );

}

간단하게 이런식으로 작성을 했다고 치자... 가져온 id 는 '2' 라고 생각하자.

화면만 봤을 때는, 내가 원하는대로 특전 id 를 가진 json data 만 화면에 그려졌기 때문에 ,정상적으로 불러오는 줄 알았다.

그런데 css 수정을 위해 개발 모드를 켜서 element 를 찍어보는 순간... 엥?

 

이게 뭐시여... ?

보면 id 값이 일치하는 두 번째 객체에만 데이터가 들어가 있긴한데... 저 비어있는..수많은 div 가 날 두렵게했다...

데이터만 안가져올 뿐, 빈 element 는 map() 함수에 의해 생성되어 있던 것이다. 

 

음 그래서 이것저것 시도를 해보았다... useState 를 이용해서 state 값을 변경해서 넣어야하나..?

-> 그러나 실패했고...

 

로컬 json 파일이었기 때문에 imort 를 통해 데이터를 불러오고 있었는데, axios 로 불러올까? 싶어서

axios get으로 불러오려했지만... -> 실패 (로컬 get 주소가 불안정할거라 생각했다...)

 

한 한시간 삽질 끝에 방법을 알았다.

우선 첫 번째 시도는 filter() 를 이용하는 것이었는데 filter() 를 이용해서 조건을 맞추고 return 값을 보내니...

Objects are not valid as a React child 라는 에러메세지가 돌아왔고.

리액트에서 object 값을 불러올때는 map 을 사용하라는 솔루션을 보고 어떻게든 map을 사용해야겠구나 생각했다.

 

그래서 발견한게..!

 

정답 : 

filter() 함수로 우선 조건을 걸러주고, 그 뒤에 map() 함수로 element 와 데이터를 리턴하는 거였다!!!

const Component = ({id}) => {

  const soulution = jsonData.filter((item) => {
    if(id === item.id){
      return item;
    }
  }).map((item) => {
    return(
      <div key={item.id}>
        <div>{item.id} 나는 예시에용</div>
      </div>
    )
  });
  
  return(
    <div>
      {solution}
    </div>
  );

}

이렇게 solution 변수를 따로 빼서 작업했다.

filter 조건으로 id 와 item.id 값이 같은 객체만 item 데이터를 리턴을 해주고, 그 item 을 map() 함수로 뿌려주면...

 

이제 저 두려운 div 무리들이 사라지고, 딱 내가 원하는 단일 객체만이 map 으로 뿌려진다.