-
[React] React 에서 배열 사용하기FRONT-END/React 2020. 11. 5. 12:07
| 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
| 출력 결과
'FRONT-END > React' 카테고리의 다른 글
[React] 배열을 출력하기 위해 Map 메소드 사용하기 (0) 2020.11.05 [React] Key 값으로 출력하기 (0) 2020.11.05 [React] React에서 생성자 사용하기 (0) 2020.11.05 [React] npm, Node.js, ES6 (0) 2020.11.05 [React] React 의 장점과 SPA (0) 2020.11.05