[React] 리액트 - 데이터가 변경하는 리액트 앱 만들기 예제

안녕하세요. 이번 포스팅에서는 리액트(React)를 활용하여 유동적인 데이터를 렌더링하는 방식과 관련된 간단한 예제 App을 만들어보도록 하겠습니다. 

 

---

1. 고정 데이터 렌더링

먼저 고정 데이터를 렌더링하는 간단한 예제입니다. 예제는 웹페이지에 game List를 보여주는 형태로 어떠한 데이터 변경도 없는 App입니다.

import React, { Component } from 'react';
import MyComponent from "./MyComponent";

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyComponent />
      </div>
    );
  }
}

export default App;

▼ 먼저 최상위 컴포넌트(Component)에 해당하는 App Component입니다. MyComponent를 불러오는 부모 컴포넌트에 해당합니다.

import React, { Component } from 'react';

class MyComponent extends Component
{    
    state = {
        games : ["리그 오브 레전드", "배틀 그라운드", "오버워치"]
    }

    render(){
        const gameList = this.state.games.map(
            (game, index) => (<li key = {index}>{game}</li>)
        );

        return(
            <ul>
                {gameList}
            </ul>
        );
    };
}

export default MyComponent;

▼ 컴포넌트의 state에 games라는 배열 객체를 담습니다. 화면에 보이게 되는 gameList에 해당합니다. render() 함수에서는 map() 함수를 통해 gameList에 있는 요소 값들을 사용하여 <li>~</li>로 이루어진 요소를 생성하여 gameList라는 새로운 배열 객체를 생성합니다. 여기까지는 앞서 보았던 예제들과 같습니다. gameList는 고정된 데이터로 데이터 변경에 따른 리렌더링이 일어나지 않습니다.

---

2. 데이터 추가하기

데이터를 추가해보도록 하겠습니다. gameList에 새로운 game을 추가할 수 있도록 input 요소와 Button 요소를 추가하고 이벤트를 등록해보도록 하겠습니다.

import React, { Component } from 'react';

class MyComponent extends Component
{    
    state = {
        games : ["리그 오브 레전드", "배틀 그라운드", "오버워치"],
        game : ""												  
    }

    textChange = (e) => {	// input 요소의 onChange 이벤트 핸들러
        this.setState({
            game : e.target.value
        });
    }

    add = () =>{			// Button 요소의 onClick 이벤트 핸들러
        this.setState({
            games : this.state.games.concat(this.state.game)
        });
    }

    render(){
        const gameList = this.state.games.map(
            (game, index) => (<li key = {index}>{game}</li>)
        );

        return(
            <div>
                <input type = "text" onChange = {this.textChange}></input>
                <button onClick = {this.add}>추가</button>
                <ul>
                    {gameList}
                </ul>
            </div>
        );
    };
}

export default MyComponent;

▼ input 요소와 button 요소를 추가하고 각각 onChange 이벤트와 onClick 이벤트를 등록하였습니다. onChange 이벤트 핸들러로 textChange를 구현하였습니다. textChange는 input 요소의 Value 값을 state의 game에 업데이트 합니다. 해당 state 값은 onClick 이벤트 핸들러에서 state의 games에 데이터를 추가할 때 사용됩니다. 데이터 배열 객체에 데이터를 추가할 때는 배열 객체 내장 함수인 concat() 함수를 사용하여 추가하였습니다. App을 실행해보고 결과를 확인해보겠습니다.

App 최초 실행 모습

데이터 추가 모습

▼ 내부동작에 대해 알아보겠습니다. Input 요소에 데이터를 입력하면 onChange 이벤트가 발생하고 state의 game 값을 업데이트 합니다. 이때도 리렌더링이 일어나지만, 실제 gameList가 변경되는 건 아니라서 View가 눈에 띄게 변경되지 않습니다. 추가 버튼을 Click 하였을때 onClick 이벤트 핸들러 내부에서 state의 gameList에 state의 game 값이 추가되면서 리렌더링이 발생합니다.

---

3. 데이터 삭제하기

이번에는 데이터를 삭제해보도록 하겠습니다. List에 해당하는 li 태그에 onClick 이벤트를 등록하여 List를 Click 하였을 때 해당 요소가 삭제되도록 구현하겠습니다.

import React, { Component } from 'react';
import "./MyComponent.css"

class MyComponent extends Component
{    
    state = {
        games : ["리그 오브 레전드", "배틀 그라운드", "오버워치"],
        game : ""
    }

    textChange = (e) => {
        this.setState({
            game : e.target.value
        });
    }

    add = () =>{
        this.setState({
            games : this.state.games.concat(this.state.game)
        });
    }

    handledelete = (index) => {
        this.setState({
            games :
                [
                    ...this.state.games.slice(0, index),
                    ...this.state.games.slice(index + 1, this.state.games.length) 
                ]
        })
    }

    render(){
        const gameList = this.state.games.map(
            (game, index) => (<li key = {index} onClick = {() => this.handledelete(index)}>{game}</li>)
        );

        return(
            <div>
                <input type = "text" onChange = {this.textChange}></input>
                <button onClick = {this.add}>추가</button>
                <ul>
                    {gameList}
                </ul>
            </div>
        );
    };
}

export default MyComponent;

▼ li 요소를 Click 하였을 때 해당 요소를 제거하기 위해 li 요소에 onClick 이벤트를 등록하고 핸들러로 index를 인자로 하는 handledelete를 넘깁니다. handledelete는 Click 된 요소에 대한 index를 가지고 기존 배열 객체에서 해당 index를 제외한 새로운 배열 객체를 만들어 state의 games를 업데이트합니다. 

App 최초 실행

두 번째 요소 제거

■ [React] 리액트 - 컴포넌트 (Component) 생성하기

■ [React] 리액트 - state 사용하기

■ [React] 리액트 - props 사용하기

■ [React] 리액트 - 이벤트 처리하기

■ [React] 리액트 - 배열 내장 함수 map을 통한 Component 반복

 

위 코드들을 이해하기 위해 해당 블로그의 다른 포스팅들을 참조해주세요.