[React] 배열 랜더링

배열 랜더링

1. List.js를 생성하고 기본 폼을 만들어준다.

import React from 'react';

function User({user}){
    return(
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    );
}

export default List;

 

2. 배열 나타나게 해주기

import React from 'react';

function User({user}){
    return(
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    );
}

function List(){
    const user = [
        {
        id: 1,
        username: 'user01',
        email: 'user01@email.com'
        },
        
        {
        id: 2,
        username: 'user02',
        email: 'user02@email.com'
        },
        
        {
        id: 3,
        username: 'user03',
        email: 'user03@email.com'
        }
    ];

    return (
        <div>
            <User.user={users[0]} />
            <User.user={users[1]} />
            <User.user={users[2]} />
        </div>
    );
}

export default List;

다음과 같은 결과 값이 나온다.

 

 

3. 배열의 랜더링을 하면 return 코드가 변경하게 된다.

return (
    <div>
        {user.map(user => (
            <User user={user} key={user.id} />
        ))}
    </div>
);

리액트에서 배열을 랜더링 할 때는 key라는 props를 설정해야 한다.

key값은 고유한 값으로 설정하여야 하며 위와 값은 경우에는 id가 key값이 될 수 있다.

 

만일 고유값이 없다면, key = {index}로 인덱스 값을 사용해 설정할 수 있다.

 

다음과 같은 결과 값이 나온다.

 

 

배열 활용하기

배열에 새로운 항목을 추가하는 코드를 만들어보기.

 

+ 추가하기 전, 코드

//List.js

import React from './react';

function User({user}) {
    return(
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    );
}

function List({users}){
    return (
        <div>
            {user.map(user => (
                <User user = {user} key={user.id} />
            ))}
        </div>
    );
}

export default List;

//App.js

import React, {useRef, useState} from './react';
import List from './List';

function App(){
    return(
        <div>
        </div>
    );
}