[React] 리스트 array,map

map()함수를 이용하여 array값을 원하는 조건으로 거친 후 반환한다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

배열의 값을 2배로 나타내주는 코드이다.
결과는 [2,4,6,8,10]

여러개의 컴포넌트를 렌더링

{}을 활용하여 JSX에 포함시킬수 있다.

function TasteAvatar(props) {
  const [Taste, setTaste] = useState([
    '한식',
    '분식',
    '일식',
    '카페',
    '중식',
    '양식',
    '술집',
    '베이커리',
    '햄버거',
  ]);

  // Taste avatar 렌더하기
  const renderTasteAvatar = props.list.map((value, index) => (
    <React.Fragment key={index}>
      <Avatar size={64} icon={<UserOutlined />} />
      <p>{value}</p>
    </React.Fragment>
  ));

  return <div>{renderTasteAvatar}</div>;
}

Taste arry에 해당하는 원소들을 뽑아 Avatar로 나타내는 코드이다.
여기서 key를 생각해야한다. key가 없다면 key를 넣어야 한다는 에러가 발생한다.
“key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다.

key에 대한 자세한 내용은 다음에 작성하겠습니다.