[ 21 ] map 함수와 JSX

 

map 함수 사용시 주의할 점 

배열의 각 요소가 객체일때 , 한줄이라 중괄호 {} 를 생략하면 객체가 함수의 중괄호로 인식 될 수 있으니 조심해야 한다.

 

 

JSX 요소가 배열에 담겨 있다면, React는 자동으로 순서대로 렌더링을 한다 

 

백엔드에서 받은 데이터를 실무에서 렌더링 하는 방법 

1번의 방법은 map 함수의 결과 배열을 변수에 담아서 이 변수를 presenter에서 사용하는 방법이고, 2번의 방법은 JSX 안에 map 함수를 넣어서 렌더링 하는 방법이다.

 

presenter의 JSX 을 확인했을때 bbb같은 변수를 확인해보기 위해서는 다시 container로 이동해야하는 번거로움이 있으므로 , 

container로부터 backend의 데이터를 건네받아 presenter 컴포넌트 자체에서 map 함수를 작성해 효율적으로 렌더링을 한다.

// 1. 실무 백엔드 데이터 예제
  const bbb = FRUITS.map((el) => (
    <div>
      {el.number} {el.title}
    </div>
  ));

  return (
    <div>

      <div>{bbb}</div>
      ====================================
      <div>
        {/* 2. 실무 효율적인 렌더링 예제 */}
        {FRUITS.map((el) => {
          <div>
            {el.number} {el.title}
          </div>;
        })}
      </div>
    </div>
  );

 

백엔드로부터 게시판 목록을 받아와서 렌더링 해보기 

import { useQuery, gql } from "@apollo/client";
import { title } from "process";
import { writer } from "repl";

const FETCH_BOARDS = gql`
  query {
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);

  console.log(data?.fetchBoards);

  return (
    <div>
      {data?.fetchBoards.map((el) => (
        <div>
          <span type="checkbox"></span>
          <span style={{ margin: "10px" }}>{el.number}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
        </div>
      ))}
    </div>
  );
}

 

style = {} 에 중괄호를 2번 쓰는 이유

바깥쪽 중괄호는 JSX 에서 자바스크립트 문법을 쓰기 위해 사용하고, 안쪽 중괄호는 css를 객체로 담기 때문에 객체를 표시하는 중괄호이다.