[Typescript React] 리스트 컴포넌트

---

컴포넌트를 배열에 담아 렌더링하자

여러개의 리액트 객체를 표시해야 할 때는, JSX 문법에 배열을 사용할 수 있습니다.

각각의 컴포넌트 타입이 달라도 동작하며, 특히 리스트를 보여줘야 하는 컴포넌트를 만들 때 유용합니다.

let list: ReactNode[] = [
    <h1>Hello, React!</h1>,
    <h3>Installation</h3>,
    <p>First, Download the library from the link below.</p>
];
let element = <div>{list}</div>;

ReactDOM.render(element, document.getElementById("app"));

이런 사용방법은 리스팅아이템li을 쉽게 출력할 수 있도록 도와줍니다.

아래는 순서없는 리스트 태그ul의 예시입니다.

HTML : 

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

React :

let list: string[] = [
    "Lorem", 
    "Ipsum", 
    "Dolor"
];
let element = (
    <ul>
        {list.map(str => (<li>str</li>))}
    </ul>
);

ReactDOM.render(element, document.getElementById("app"));

---

JSX에서 li를 올바르게 사용하자

리스트 컴포넌트는 배열을 상태로 가지고 있습니다.

그리고 배열에 조작이 가해질 경우, 렌더링 결과도 달라지겠죠.

리액트는 배열의 어떤 아이템에 변화가 발생했는지 체크하기 위해,

각 리스트 태그의 하위 아이템은 Key를 설정할 것을 요구합니다.

let element = (
    <ul>
        {list.map(value => (
            <SomthingComponent key={value}>value</SomthingComponent>
        ))}
    </ul>
);

Attention!

key 속성은 SomethingComponenet 요소가 갖는 것이 아닙니다.

ul의 자식 컴포넌트가 가지는 속성입니다.

어떤 사람이 A회사의 사원증을 가지고 있다면.

그 사람의 속성 자체가 A회사의 사원이라, 사원증을 가지고 있는것이 아니라,

그 사람이 A회사의 사원이기 때문에, 사원증을 가지고 있는 것과 동일한 이치입니다.

즉, SomethingComponenet의 PropType은 Key라는 속성이 있으면 안됩니다.

만약 명시적으로 키를 지정하지 않는다면 인덱스 번호가 키로 설정됩니다만,

사실 인덱스 번호는 좋은 키가 아닙니다.

앞의 요소가 삭제되면, 뒷 요소 전체에게 영향이 가기 때문이죠.

유니크한 키를 주어야지만, 렌더링 비용을 줄일 수 있습니다.

덧붙이자면 키는 하나의 ul 안에서만 유니크하면 되는데,

서로다른 ul 안에서는 키가 겹쳐도 상관없습니다.