React STEP 23 - Create React App - 5

⭐ Create React App

• 컴포넌트 매핑 이해하기

1. 단계 1

• src/DataComponent.js

class DataComponent extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }

        return (
            <ul style={ulStyle}>
                <li style={liStyle}>member1</li>
                <li style={liStyle}>member2</li>
                <li style={liStyle}>member3</li>
            </ul>
        )
    }
}

 

2. 단계 2

• src/App.js

 class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loginData : [
                {name: "member1", age: 21},
                {name: "member2", age: 22},
                {name: "member3", age: 23},
            ]
        }
    }
    render() {
        return (
            <div className="container">
                <h1>React Example</h1>
                <DataComponent loginData={this.state.loginData}></DataComponent>
            </div>
        )
    }
 }

• src/DataComponent.js

class DataComponent2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loginData: props.loginData}
    }
    render() {
        let ulStyle={
            marginTop: 15
        };
        let liStyle={
            lineHeight: 1.8
        };
        let data=this.state.loginData;
        let dataList=data.map((d, i) => <li key={i+1} style={liStyle}>{d.name}, {d.age}</li>);
        return (
            <ul style={ulStyle}>
                {dataList}
            </ul>
        );
    }
}

export default DataComponent2;