[React] React 에서 배열 사용하기

| App.js

import React from 'react'
import './App.css'
import Counter from './Counter.js'
import MyName from './MyName'

export default class App extends React.Component{
  state = {
    idx:7700,
    nick:'kim',
    idols:['orange','red','pink','black'],
  }

  render(){
    return(
      <div className="container">
          App.js <hr></hr>
          <MyName first='박' last='단비'/>
          <hr></hr>
          <MyName/>
      </div>
    )//return end
  }//render end
}//class end

 

| 배열 펼치기

let values = [3,1,3,5,2,4,4,4];
let uniqueValues = [...new Set(values)];

 

| 배열 웹페이지에 출력

import React from 'react'
import './App.css'
import Counter from './Counter.js'
import MyName from './MyName'

export default class App extends React.Component{
  state = {
    idx:7700,
    nick:'kim',
    idols:['orange','red','pink','black'],
  }

  render(){
    let arr = this.state.idols;
    let str = []; // arr를 담아줄 배열 추가
    for(let i=0; i<arr.length; i++){
      str.push(<b> {arr[i]} </b>);
      console.log(arr[i]);
    }

    return(
      <div className="container">
          App.js <hr></hr>
          {this.state.idx} {this.state.nick}  
          {str}
      </div>
    )//return end
  }//render end
}//class end

 

| 출력 결과