map()
: 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 프로세싱 한 후 그 결과로 기존 배열을 새로운 배열로 생성arr.map(callback,[thisArg])
map 함수를 사용해 배열 [1,2,3,4,5] 각 요소를 제곱해 새로운 배열 생성
const number=[1,2,3,4,5]
const result=number.map(num=>num*num)
console.log(result)
import React,{Component} from "react";
class IterationSample extends Component{
render(){
const names=["눈사람","얼음","눈","바람"];
const nameList=names.map(
(name)=>(<li>{name}</li>)
);
return (
<ul>{nameList}</ul>
)
}
}
export default IterationSample;
import './App.css';
import React,{Component} from 'react';
import IterationSample from './IterationSample';
class App extends Component{
render(){
{
return (
<IterationSample/>
);
}
}
}
export default App;
map()
의 인자로 전달되는 함수 내부에서 컴포넌트 props
를 설정import React,{Component} from "react";
class IterationSample extends Component{
render(){
const names=["눈사람","얼음","눈","바람"];
const nameList=names.map(
(name,index)=>(<li key={index}>{name}</li>)
);
return (
<ul>{nameList}</ul>
)
}
}
export default IterationSample;
컴포넌트 state에 기존 상수로 담은 배열 값 추가
state={
names:["눈사람","얼음","눈","바람"],
name:""
};
input : 기본값 공백, state에 저장
<div>
태그로 컴포넌트 위에 input과 output 위치/랜더링
이벤트 핸들러 메서드를 input과 button에 각각 설정
concat
: 기존 배열 수정 X, 기존 배열+새 값인 새로운 배열 생성
import React,{Component} from "react";
class IterationSample extends Component{
state={
names:["눈사람","얼음","눈","바람"], //기존 상수로 담은 배열 값 추가
name:"" //input 기본값 공백
};
handleChange=(e)=>{
this.setState({
name:e.target.value
});
}
handleInsert=()=>{
this.setState({
names:this.state.names.concat(this.state.name),
//names 배열에 값 추가
name:""
//name 값 초기화
})
};
render(){
const nameList=this.state.names.map(
(name,index)=>(<li key={index}>{name}</li>));
return(
<div> {/* div 태그로 input과 button 감쌈 -> 컴포넌트 위로 랜더링*/}
<input
onChange={this.handleChange} //이벤트 부여
value={this.state.name}/>
<button onClick={this.handleInsert} //이벤트 부여
>추가</button>
<ul>{nameList}</ul>
</div>
)
};
}
export default IterationSample;
아이템 두 번 클릭하면 제거하도록 기능 구현 onDoubleClick
import React,{Component} from "react";
class IterationSample extends Component{
state={
names:["눈사람","얼음","눈","바람"], //기존 상수로 담은 배열 값 추가
name:"" //input 기본값 공백
};
handleChange=(e)=>{
this.setState({
name:e.target.value
});
}
handleInsert=()=>{
this.setState({
names:this.state.names.concat(this.state.name), //names 배열에 값 추가
name:"" //name 값 초기화
})
};
//더블클릭 이벤트 발생 : 삭제 함수
handleRemove=(index)=>{
const {names}=this.state;
//names 레퍼런스 미리 만들기
this.setState({
names:[ //전개 연산자(...) 사용
...names.slice(0,index), //처음 ~ 삭제할 요소 전까지 복사
...names.slice(index+1,names.length) //삭제할 요소 다음 ~ 끝까지 복사
]
});
}
render(){
const nameList=this.state.names.map(
(name,index)=>(
<li
key={index}
onDoubleClick={()=>this.handleRemove(index)}
/*아이템 더블 클릭시 삭제 함수 실행됨 (클릭된 아이템 key 값인 index 전달)*/>
{name}
</li>));
return(
<div> {/* div 태그로 input과 button 감쌈 -> 컴포넌트 위로 랜더링*/}
<input
onChange={this.handleChange} //이벤트 부여
value={this.state.name}/>
<button onClick={this.handleInsert} //이벤트 부여
>추가</button>
<ul>{nameList}</ul>
</div>
)
};
}
export default IterationSample;
filer 사용한 handleRemove 함수
handleRemove=(index)=>{
const {names}=this.state;
//names 레퍼런스 미리 만들기
this.setState({
//fiter로 index번째만 제외한 원소만 있는 배열 생성
names:names.filter((item,i)=>i!==index)
});
}