[react] react의 반복문 map, 컴포넌트 사용법(ft. props)

리액트 map

 

리액트 반복문 map()의 

사용법에 대하여 알아보겠습니다. 

 

· 리액트에서는 반복문을 map으로 사용합니다. 
· 자바스크립트에서 배열의 반복문에 사용하는 map() 입니다. 
· vue는 v-for를 통한 반복문을 사용하는데 반해, 리액트는 map()을 사용하여 제 생각에는 가독성이 떨어집니다.

 

예제1: 배열의 반복

import React, { Component } from 'react';

class Map extends Component {
    state = {
        fruits: ['🍉', '🍓', '🍊', '🍋', '🍌', '🍍', '🥭'],
    }

    render() {
        return (
            <>
                <ul>
                    {this.state.fruits.map((fruit) => { return (<li>{fruit}</li>) })}
                </ul>
            </>
        )

    }
}

export default Map;

 

화면 결과

 

예제2: 배열안의 객체형식

import React, { Component } from 'react';

class Map extends Component {
    state = {
        fruits: [
            {fruit: '🍉', color: 'green' },
            {fruit: '🍓', color: 'red' },
            {fruit: '🍊', color: 'orange' },
            {fruit: '🍋', color: 'yellow' },
            {fruit: '🍌', color: 'yellow' },
            {fruit: '🍍', color: 'yellow' },
            {fruit: '🥭', color: 'red' },
        ],
    }

    render() {
        return (
            <>
                <ul>
                    {this.state.fruits.map((item) => { return (<li>{item.fruit} {item.color}</li>) })}
                </ul>
            </>
        )

    }
}

export default Map;

 

화면 결과

 

반복문을 컴포넌트 분리

Props

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하는 방법

//컴포넌트 태그내
<Fruit 자식 컴포넌트에서 사용할 props 이름 = {전달할 기존 state} />

 

예제3-1 : 반복문을 컴포넌트 분리 class 방식

부모 컴포넌트

import React, { Component } from 'react';
import Fruit from './Fruit';

class Map extends Component {
    state = {
        fruits: [
            {fruit: '🍉', color: 'green' },
            {fruit: '🍓', color: 'red' },
            {fruit: '🍊', color: 'orange' },
            {fruit: '🍋', color: 'yellow' },
            {fruit: '🍌', color: 'yellow' },
            {fruit: '🍍', color: 'red' },
            {fruit: '🥭', color: 'red' },
        ],
    }

    render() {
        return (
            <>
                <ul>
                    {this.state.fruits.map((item) => { return ( <Fruit propsData={item} /> ) })}
                </ul>
            </>
        )

    }
}

export default Map;

 

자식 컴포넌트

import React, { Component } from 'react';

class Fruit extends Component {


    render() {
        return (
            <li>{this.props.propsData.fruit} {this.props.propsData.color}</li>
        )
    }
}

export default Fruit;

 

예제3-2 : 반복문을 컴포넌트 분리 hooks 방식

부모 컴포넌트

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

const Map = () => {
    const [fruits, setFruits] = useState([
        {fruit: '🍉', color: 'green' },
        {fruit: '🍓', color: 'red' },
        {fruit: '🍊', color: 'orange' },
        {fruit: '🍋', color: 'yellow' },
        {fruit: '🍌', color: 'yellow' },
        {fruit: '🍍', color: 'red' },
        {fruit: '🥭', color: 'red' },
    ]);

    return (
        <>
            <ul>
                {fruits.map((item) => { return ( <Fruit propsData={item} /> ) })}
            </ul>
        </>
    )
}

export default Map;

 

자식 컴포넌트

import React, { Component } from 'react';

const Fruit = ({propsData}) => { //구조분해

    return (
        <li>{propsData.fruit} {propsData.color}</li>
    )   
}

export default Fruit;

 

화면 결과