React STEP 22 - Create React App - 4

⭐ Create React App

• map() 함수로 태그 반환하기

 

1. 단계 1

• 반복해서 출력해야 하는 태그들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return 할 수 있습니다.
• src/ReturnMap.js

class ReturnMap extends React.Component {
    render() {
        let ulStyle= {
            marginTop: 15
        }
        let liStyle = {
            lineHeight: 1.8
        }
        let forArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ];

        return (
            <ul style={ulStyle}>
                {forArray}
            </ul>
        )
    }
}

export default ReturnMap;

 

2. 단계 2

• 새로운 array에 옮겨 담기

class ReturnMap2 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        };
        let liStyle = {
            lineHeight : 1.8
        };
        let forArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ];
        let forNewArray = [];

        for(let i=0; i<forArray.length; i++) {
            forNewArray.push(forArray[i]);
        }

        return (
            <ul style={ulStyle}>
                {forNewArray}
            </ul>
        )
    }
}

export default ReturnMap2;

 

3. 단계 3

• forEach문을 통한 더욱 편리한 방법

class ReturnMap3 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }
        let forEachArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ];
        let forEachNewArray = [];

        forEachArray.forEach(result => {
            forEachNewArray.push(result);
        });

        return (
            <ul style={ulStyle}>
                {forEachNewArray}
            </ul>
        )
    }
}

export default ReturnMap3;

 

4. 단계 4

• map 함수를 사용하여 더 간단한 방법

class ReturnMap4 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }
        let mapArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ]
        let mapNewArray = mapArray.map(arrayVal => arrayVal);

        return (
            <ul style={ulStyle}>
                {mapNewArray}
            </ul>
        )
    }
}

export default ReturnMap4;

 

5. 단계 5

• elementArray 방법

class ReturnMap5 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }
        let elementArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ]

        return (
            <ul style={ulStyle}>
                {elementArray.map(arrayVal => arrayVal)}
            </ul>
        )
    }
}

export default ReturnMap5