React 5일차

fragment

리액트 <React.Fragment>
웹 표준 <template>

리액트는 하나의 태그가 나머지를 감쌈
그래서 아래와 같은 코드는 문법 오류

return <div>one</div><div>two</div>;

// 이렇게 해석되기 때문
return React.createElement(/* type */'div', /* props */{})React.createElement(/* type */'div', /* props */{})

단순히 감쌀 목적이라면 div를 사용하지 말자

• 배열로 감싸기 (가능)

return [
     React.createElement(/* type */ 'div', /* props */ {}, 'one'),
     React.createElement(/* type */ 'div', /* props */ {}, 'two'),
];

• 리액트 플래그먼트 사용 (권장)

return (
  <>
    <div>one</div>
    <div>two</div>
    </>
);

---

리액트에 사용 적합한 것

map
: 값을 반환하기 때문

const mapResult = contactData.items.map((item) => {
  // mutation (update)
  item.face += 1;
  return item;
});

filter
: 원본 배열을 파괴하지 않고 새로운 배열을 반환하기 때문

const filteredResult = contactData.items.filter((item) => {
  return item.gender.includes('woman');
});

console.log(filteredResult.length, filteredResult);

---

key 속성

리액트는 가상 돔을 만들고 진짜 돔에 주입하는 방식으로 동작한다.
그래서 값이 변경되면 이전 가상 돔과 현재 가상 돔을 비교해서 변경된 부분만 교체하고 실제 돔에 주입한다.

이러한 렌더링 과정이 있기에 비교를 위한 고유 식별자가 필요하고 그것이 key이다.

그래서 key는 고유한 값을 가져야 하며 성능에도 영향을 미친다.

📍 단순히 index를 key값으로 넣지말자