React STEP 17 - JSX에서 배열 사용

⭐ JSX에서의 배열

 

1. 단계 1

class Round extends React.Component {
  render() {
    let roundStyle = {
      display: "inline-block",
      margin:10,
      width: 100,
      height: 100,
      backgroundColor: this.props.backgroundColor,
      borderRadius: 50
    }

    return(
      <div style={roundStyle}></div>
    )
  };
  
}

root.render (
  <Round></Round>
)

 

2. 단계 2

class Round2 extends React.Component {
  render() {
    let roundStyle = {
      display: "inline-block",
      margin:10,
      width: 100,
      height: 100,
      backgroundColor: this.props.backgroundColor,
      borderRadius: 50
    }

    return (
      <div style={roundStyle}></div>
    )
  }
}

let round1 = <Round2 backgroundColor="#f90"></Round2>;
let round2 = <Round2 backgroundColor="#eaeaea"></Round2>;

root.render (
  <div>
    {round1}
    {round2}
  </div>
)

• 해석

let round1=<Round backgroundColor="#f90" />;
let round2=<Round backgroundColor="#eaeaea" />;
클래스 컴포넌트를 인스턴스 화하여 사용되고 있는 것을 알 수 있습니다.
인스턴스는 복제물이라고 생각하면 되고, 클래스는 복제물의 원본이 되는 설계도라고 생각하면 
됩니다

 

3. 단계 3

class Round3 extends React.Component {
  render() {
    let roundStyle={
      display: "inline-block",
      margin: 10,
      width: 100,
      height: 100,
      backgroundColor: this.props.backgroundColor,
      borderRadius: 50
    };
    return(
        <div style={roundStyle}></div>
    ) 
  }
}

let drawNewRound=() => {
  let colors=["#f90", "#09f", "#eaeaea", "#ccc"];
  let randomColor=Math.floor(Math.random()*colors.length);
  return <Round3 backgroundColor={colors[randomColor]} />
};

root.render (
  <div>
    {drawNewRound()}
    {drawNewRound()}
    {drawNewRound()}
    {drawNewRound()}
  </div>
)

 

4. 단계 4

class Round4 extends React.Component {
  render(){
      let roundStyle={
          display: "inline-block",
          margin: 10,
          width: 100,
          height: 100,
          backgroundColor: this.props.backgroundColor,
          borderRadius: 50
      };
      return(
          <div style={roundStyle}></div>
      );
  }
}

let colors=["#f90", "#09f", "#8ac007", "#eaeaea", "#ccc", "#999"];

let componentData=colors.map((d, i) => <Round4 key={i+1} backgroundColor={d} />);

root.render (
  <div>
    {componentData}
  </div>
)