[TIL] 12.16

서버가 없기 때문에 json 파일로 저장되어 있는 제목과 작성자 정보를 바로 import하여 뿌려주었다.

리엑트에선 map을 사용해야 했기 때문에 객체 형식인 json을 배열로 바꿔줄 필요가 있었다.

Object.entries 란 함수를 사용하였고 이 함수는 객체를 배열로 바꿔준다. 

let obj = {a:1}
let arr = object.entries(a)
console.log(arr) // ["a",1]

  var articleArr = Object.entries(articleData)

render 부분에서 map을 돌려 바로 넘겨 주었는데 return 을 사용하지 않으면 값이 넘어 가지 않았고  return을 사용하면 첫번째 값만 넘어가졋다. 

 

그래서 변수를 설정하여 해장 변수에 값을 담아준 다음 렌더하는 방법을 사용하였다. 

  articleArr.map((data) => {
    for(let i= 0; i< data[1].length; i++){
      articleComponent.push(
        <Col key={data[1][i]["title"]} span={6}>
          <Link to={`/${data[0]}/${data[1][i]["filepath"]}`}>
            <Board data={data[1][i]}/>
          </Link>
          <div style={{"margin":"20px"}}/>
        </Col>
        )
      if(!TagName.includes(data[1][i]["category"])){
        TagName.push(data[1][i]["category"])
      }
    }
  })

 

추후에 생각해보았는데 return 이 안되었던 이유는 es6 문법을 사용할 때 중괄호를 빼줘야 return을 사용하지 않아도 값이 출력이 되는데 중괄호를 사용하고 있었다.