200206 React

React

JSX를 알아보자 -ㅅ-

- 예제 : 할 일 목록 

import React from 'react'
 
class MyComponent extends React.Component {
    state = {
        desc: '', id: 0, todoList: []
    }
 
    // 할 일 추가
    todoAdd = () => {
        // id 증가
        // 설명 입력
        // 추가
        let { desc, id, todoList } = this.state;
 
        id += 1
        this.setState({ id })
 
        todoList.push({ desc, id })
        console.dir(todoList)
        alert(`${desc} 추가`)
    }
    // 할 일 삭제
    todoDel = (e) => {
        const { todoList } = this.state
        const id = Number(e.target.dataset.id)
        {/* e.target.dataset.id는 data-id를 가리킨다. */}
        const before = todoList.filter(todo => todo.id === id)
 
        alert(`${before[0].desc} 삭제`)
 
        const newTodoList = todoList.filter(todo => todo.id !== id)
        this.setState({ todoList: newTodoList })
    }
 
    onChangeDesc = e => {
        this.setState({ desc: e.target.value })
    }
 
    render() {
        let { todoList } = this.state;
 
        return (
            <div>
                <h2>할 일 목록이다</h2>
                <ul>
                    {
                        todoList.map(todo => {
                            return (
                                <li key={todo.id}>
                                    <span>{todo.desc}</span> {/* data-id는 JSX 문법 */}
                                    <button data-id={todo.id} onClick={this.todoDel}>삭제</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <input type="text" id="inputTodo" onChange={this.onChangeDesc}></input>
                <button onClick={this.todoAdd}>추가</button>
            </div>
        )
    }
}
 
export default MyComponent

e.target : onChange 메소드가 호출된 곳의 태그 부분을 가져오더라.

onChangeDesc에서 e.target = <input type="text id="inputTodo">

그러므로 e.target.value는 input 영역의 텍스트.