NumberBaseball.jsx 생성
# import React, {Component} from 'react';
//클래스 생성
class NumberBaseball extends Component {
state = {
result:'',
value:'',
answer: '', //getNumbers(),
tries:[]
};
onSubmit = (e) => {
...
}
onChange = (e) => {
this.setState({ value : e.currentTarget.value});
}
render(){
return(
<>
<h1>{this.state.result}</h1>
<form onSubmit={this.onSubmit}>
<input maxLength={4} value={this.state.value} onChange={this.onChange}></input>
</form>
<div>시도 : {this.state.tries.length}</div>
<ul>
...
</ul>
</>
)
}
}
export default NumberBaseball;반복문 설정
리액트 반복문은 map 함수를 사용한다.
array.map(value, index) => {
return (
//배열의 value값 : 배열의 index 값이 반복된다.
<li> value[0] : value[1] </li>
)
}2차원 배열 형태로 반복할 때는 반복하는 배열의 인덱스를 통해서 값을 분류하여 표현
1. 2차원 배열 반복
//클래스 생성
class NumberBaseball extends Component {
...
render(){
return(
<> ...
<ul>
<p>2차원 배열 반복문</p>
{
[
['에스프레소', '쓰다']
,['아메리카노', '깔끔하다']
,['카푸치노', '고소하다']
,['카페라떼', '텁텁하다']
,['녹차라떼', '달다']
].map((v) => {
return(
<li key={v[0]}><b>{v[0]}</b> - {v[1]}</li>
)
}
)
}
</ul>
</>
)
}
}2. 객체 배열 반복
배열 안에 있는 객체를 반복하는 경우
array.map(value, index) => {
return (
//배열안 객체의 해당 속성의 값 : 배열안 객체의 해당 속성의 값이 반복된다.
<li> value.객체속성명 : value.객체속성명2 </li>
)
}map 함수 아무것도 생략하지 않은 경우
//클래스 생성
class NumberBaseball extends Component {
...
render(){
return(
<> ...
<ul>
<p>배열 객체 반복문</p>
{
[
{coffee:'에스프레소', taste:'쓰다'}
,{coffee:'아메리카노', taste: '쓰다'}
,{coffee:'카푸치노', taste: '텁텁하다'}
,{coffee:'카페라떼', taste: '텁텁하다'}
,{coffee:'녹차라떼', taste: '달다'}
,{coffee:'녹차라떼', taste: '텁텁하다'}
].map((v) => {
//생략X
(val,index) => {
return(
<li key={val.coffee + val.taste}><b>{val.coffee}</b> - {val.taste} - {index}</li>
)
}
}
</ul>
</>
)
}
}배열안의 객체를 통해 표현할 경우
반복문 화살표 함수를 쓸 때 retrun은 생략할 수 있다.
array.map(value, index) => {
//배열안 객체의 해당 속성의 값 : 배열안 객체의 해당 속성의 값이 반복된다.
<li> value.객체속성명 : value.객체속성명2 </li>
}배열안의 객체를 통해 표현할 경우
반복문 화살표 함수를 쓸 때 중괄호, retrun은 생략할 수 있다.
array.map(value, index) =>
//배열안 객체의 해당 속성의 값 : 배열안 객체의 해당 속성의 값이 반복된다.
<li> value.객체속성명 : value.객체속성명2 </li>반복문을 쓸 때 key 값을 쓰지않으면 오류가 발생한다.
key는 유니크한 값을 사용해야하는데
key 값으로 index 값을 넣는 경우 최적화를 할 때 오류가 발생하기 때문에 제외해야한다.
//클래스 생성
class NumberBaseball extends Component {
...
render(){
return(
<> ...
<ul>
<p>2차원 배열 반복문</p>
{
[
{coffee:'에스프레소', taste:'쓰다'}
,{coffee:'아메리카노', taste: '쓰다'}
,{coffee:'카푸치노', taste: '텁텁하다'}
,{coffee:'카페라떼', taste: '텁텁하다'}
,{coffee:'녹차라떼', taste: '달다'}
,{coffee:'녹차라떼', taste: '텁텁하다'}
].map((v) => {
//중괄호, retrun 생략
(val,index) => <li key={val.coffee + val.taste}><b>{val.coffee}</b> - {val.taste} - {index}</li>
}
</ul>
</>
)
}
}3.반복할 배열을 render 밖으로
class For extends Component {
state = {
};
//반복할 배열 외부로 빼기
coffeeArray = [
['에스프레소', '쓰다']
,['아메리카노', '깔끔하다']
,['카푸치노', '고소하다']
,['카페라떼', '텁텁하다']
,['녹차라떼', '달다']
];
//반복할 배열 외부로 빼기
coffeeObject = [
{coffee:'에스프레소', taste:'쓰다'}
,{coffee:'아메리카노', taste: '쓰다'}
,{coffee:'카푸치노', taste: '텁텁하다'}
,{coffee:'카페라떼', taste: '텁텁하다'}
,{coffee:'녹차라떼', taste: '달다'}
,{coffee:'녹차라떼', taste: '텁텁하다'}
]
//클래스 생성
class For extends Component {
state = {
};
render(){
return (
<>
<h1>반복문 예제</h1>
<ul>
<h2>2차원 배열 반복문</h2>
{
this.coffeeArray.map((v) => {
return(
...
)
}
)
}
<br></br>
<h2>객체 반복문</h2>
{this.coffeeObject.map((val,index) => {
//return(
....
}
</ul>
</>
)
}
}4.render 구문을 외부 파일로 설정(props)
Try.jsx 생성
import React, {Component} from 'react';
class Try extends Component {
render() {
return(
<li key={val.coffee + val.taste}>
<b>{val.coffee}</b> - {val.taste} - {index}
<div>콘텐츠1</div>
<div>콘텐츠2</div>
<div>콘텐츠3</div>
</li>
)
}
}
export default Try;외부 컴포넌트로 생성한 구문 불러오기
//Try 컴포넌트 불러오기
import Try from './Try.jsx';
//클래스 생성
class For extends Component {
...
render(){
return (
<>
<h2>객체 반복문</h2>
{this.coffeeObject.map((val,index) => {
// 반복하는 구문을 컴포넌트로 분리하여 불러오기
return(
<Try/>
)
}
</>
)
}
}Try 컴포넌트를 props 없이 쓰면
해당 컴포넌트는 value와 index 값을 받지 못해서 오류가 난다.
props를 통해 value와 index 값을 전달해보자
<Try key={val.coffee + val.taste} value={val} index={index}/>Try.jsx 수정
클래스일 경우
import React, {Component} from 'react';
class Try extends Component {
render() {
return(
<li key={this.props.value.coffee + this.props.value.taste}>
<b>{this.props.value.coffee}</b> - {this.props.value.taste} - {this.props.index}
<div>콘텐츠1</div>
<div>콘텐츠2</div>
<div>콘텐츠3</div>
</li>
)
}
}
export default Try;Hooks일 경우
import React from 'react';
const TryHooks = ({tryInfo}) => {
return (
<li>
<div>{tryInfo.try}</div>
<div>{tryInfo.result}</div>
</li>
)
};
export default TryHooks;
테스트