[ React ] map() 반복문을 통한 컴포넌트 생성하기

내장함수 .map()을 사용해서 컴포넌트를 반복적으로 생성하는 방법입니다.

 

App.js

const App = () => {
    
    const arrayData = [
        {
            id: 0,
            title: '제목1'
        },
        {
            id: 1,
            title: '제목2'
        },
        {
            id: 2,
            title: '제목3'
        },
    ];
    retrun (
        {
            arrayData.length > 0 ? (
                arrayData.map((item) => (
                    <div key={item.id}>
                        {item.title}
                    </div>
                ))
            ) : null
        }
    );
}

export default App;

arrayData.length > 0 ? () : null : 삼항연산자 => arrayData내용이 있는 경우에만 ()안에 내용을 보여주고 아닐 경우에는 아무것도 보여주지 않습니다. 

key : 키값은 고유키값을 포함시켜 주어야 합니다. 포함시키지 않을 경우에는 react가 오류를 발생시킵니다.

 

:: ) 주의 : map()을 사용할 때, 항상 (), {}를 잘 구분해야 합니다. 습관적으로 () => {}를 사용하는 사람들은 에러가 나는 경우가 종종 생깁니다.