[react] List rendering

이전에 보고있던 예시 문서가 구버전이여서, 신규 버전으로 갈아탔다.

Vue에서는 v-for를 이용하여 작성하던 반복 렌더링에 대한 처리이다.

const ListItems = () => {
    const products = [
        { title: 'Cabbage', id: 1 },
        { title: 'Garlic', id: 2 },
        { title: 'Apple', id: 3 },
    ];

    return products.map((item) => {
        return <div>{item.title} {`id : ${item.id}`}</div>
    });
};

export default ListItems;

시험삼아 ListItems라는 컴포넌트를 만들어보았다.

react에서의 반복 렌더링은 단순히 v-for와 같이 attribute를 추가하는 방식이 아닌
Array.map을 이용하여 JSX를 지정해주는 방식을 주로 사용한다고 한다.

현재까지 느끼기로는 react와 vue 사이에 가장 큰 차이가 아닐까 싶다.

react에서는 JSX를 이용한 렌더링을, Vue는 <template>를 이용한 SFC구조를 가지기 때문에 그런것같다.