9. [RN] 랜덤숫자 추가 및 제거해보기

이번 시간에는 버튼을 클릭하면 랜덤으로 숫자가 1~100까지 추가되고, 생성된 버튼을 누르면 삭제될 수 있도록 하는 이벤트를 배워보겠습니다.

 

App.js

이전 배열에서 추가되는 숫자를 넣기 위해 랜덤 변수를 생성하고, 배열에 append해줍니다.

  onAddRandomNum = () => {
    //alert('add random number');
    const randomNum = Math.floor(Math.random()*100)+1;
    this.setState(prevState => {
      return {
        random: [...prevState.random, randomNum]
      }
    })
  }

숫자를 터치하면 숫자가 지워지도록 하기 위한 함수를 생성합니다.

filter 함수 특정 조건에 부합하는 요소만 뽑아내서 새 배열을 만들어주는 함수이다.

position과 index가 다른것만 뽑아서 새 배열을 만들어줌

setState를 활용해서 새로운 배열을 넣어준다.

  onNumDelete = (position) => {
    //filter 내장함수 : position과 index가 다른것만 뽑아서 새 배열을 만들어줌
    const newArray = this.state.random.filter((num,index) =>{
      return position != index;
    })
    //setState를 활용해서 새로운 배열을 넣어준다.
    this.setState({
      random: newArray
    })
  }

이제 이걸 배열조각으로 내려줄 것입니다.

 

 

전체 코드입니다.

class App extends Component{

  state = {
    appName: 'My first app',
    random: [1,2,3,4,5]
  }

//이전 배열에서 추가되는 숫자를 넣기 위해 랜덤 변수를 생성하고, 배열에 append해줍니다.
  onAddRandomNum = () => {
    //alert('add random number');
    const randomNum = Math.floor(Math.random()*100)+1;
    this.setState(prevState => {
      return {
        random: [...prevState.random, randomNum]
      }
    })
  }
//숫자를 터치하면 숫자가 지워지도록 하기 위한 함수를 생성합니다.
  onNumDelete = (position) => {
    //alert('delete');
    const newArray = this.state.random.filter((num,index) =>{
      return position != index;
    })
    this.setState({
      random: newArray
    })
  }

  render(){
    return (
      <View style={styles.mainView}>
        <Header name={this.state.appName}/>

        <View>
          <Text 
            style={styles.mainText}
            onPress={()=>alert('text touch event')}
            >hello world</Text>
        </View>

        <Generator add={this.onAddRandomNum}/>
        <NumList 
          num={this.state.random}
          //이제 이걸 배열조각으로 내려줄 것입니다.
          delete={this.onNumDelete} 
          />
      </View>
    )
  }
}

 

numList.js 조작하기

배열 리스트에서 idx를 뽑아 올려준다. 이것은 App.js에서 position에 매핑된다.

const NumList = (props) => {
    return(
        props.num.map((item,idx) =>(
            <TouchableOpacity 
                style={styles.numList} 
                key={idx}
                onPress={()=>props.delete(idx)}
            >
                <Text>{item}</Text>
            </TouchableOpacity>
        ))
    )
}

추가 및 삭제가 잘 되는 것을 볼 수 있다.