React 동빈나 강좌 #4

git

(위 사진을 캡쳐를 하기 위해 capture라는 repository를 생성했다.)

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/camel-man-ims/capture.git
git push -u origin master

여기 나오는것처럼 그대로 따라하면 git init을 통한 push가 가능해진다.

코드 1

Component란 웹 문서에서 무언가를 보여주기 위한 기본 단위

components > Customer.js 생성

App.js 에서 Customer component를 사용한다. props를 통해 값을 넘겨줌.

Customer.js

코드2

goal : App.js 에서 user data를 Customer component로 넘겨준다. Customer component에서는 받은 data를 계층에 따라 출력한다.

App.js

data 배열안의 객체 값들을 JSON 형태로 넘겨주었다. ( json이 아니라 일반 data type으로 넘겨주어도 작동한다 : "data" -> data )

배열의 값을 props를 통해 넘겨줄 때 자동화를 위해 JS library인 map을 사용했다. map 은 배열 안에 있는 모든 data를 꺼내준다. map안에 return이 있어야 되는 것에 유의하자.

key값을 설정해주지 않으면 console 창에서 error가 발생한다. JSX의 문법.

Customer.js

Customer 안에 있는 값을 계층에 따라 component를 분리했다.

전체 소스코드

Customer.js

import React, {Component} from 'react'

class Customer extends Component{
    render(){
        return(
            <div>
                <CustomerInfo
                    id={this.props.id}
                    name={this.props.name}
                    gender={this.props.gender}
                    img={this.props.img}
                />
                <CustomerProfile
                    age={this.props.age}
                    job={this.props.job}
                />
                <br/>
                <br/>
                <br/>
            </div>
          
        )
    }
}

class CustomerInfo extends Component{
    render(){
        return(
            <div>
                <h3>UserInfo</h3>
                {this.props.id}
                {this.props.name}
                {this.props.gender}
                <br/>
                <hr/>
                <img src={this.props.img}></img>
                <br/>
                <hr/>
            </div>
        )
    }
}

class CustomerProfile extends Component{
    render(){
        return(
            <div>
                <h2>userProifle</h2>
                {this.props.age}
                {this.props.job}
            </div>
        )
    }
}

export default Customer;

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Customer from './components/Customer'

const data=[
  {
  "id":1,
  "img":"https://placeimg.com/64/64/1",
  "name":"임얼쑤",
  "gender":"man",
  "age":25,
  "job":"프로그래머",
},
{
  "id":2,
  "img":"https://placeimg.com/64/64/2",
  "name":"이종원",
  "gender":"man",
  "age":28,
  "job":"창업가",
},
{
  "id":3,
  "img":"https://placeimg.com/64/64/3",
  "name":"양희찬",
  "gender":"man",
  "age":15,
  "job":"학생",
},
]

function App() {
  return (
    <div>{
      data.map(userData=>{
        return(
          <Customer
          img={userData.img}
          key={userData.id}
          id={userData.id}
          name={userData.name}
          gender={userData.gender}
          age={userData.age}
          job={userData.job}
          />
        )
      })
      }
    </div>
  
  );
}

export default App;