React STEP 24 - TODO 리스트 예제

⭐ TODO LIST

 

1. 단계 1

• 기본 구조 잡기
• AddTask.js

class AddTask extends React.Component {
    render() {
        let inputStyle = {
            marginTop : 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize : 14,
            border: "1px solid #ccc"
        };
        let buttonStyle = {
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };

        return (
            <div className="main">
                <div className="header">
                    <form>
                        <input type="text" placeholder='Add Task' style={inputStyle}>
                        </input>
                        <button type="submit" style={buttonStyle}>Added</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask;

 

2. 단계 2

• React에서의 ref 속성은 HTML 요소의 레퍼런스를 변수에 저장하기 위해서 사용합니다.
• 특히 <input> 을 통해 변수를 저장할 때 유용합니다.

class AddTask2 extends React.Component {
    addTask(e) {
        e.preventDefault();
        console.log(this._input.value);
    }

    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };

        return (
            <div className='main'>
                <div className="header">
                    <form onSubmit={this.addTask.bind(this)}>
                        <input type='text' placeholder='Add Task' style={inputStyle} 
                        ref={
                            function(e) {
                                this._input=e;
                            }.bind(this)
                        }
                        ></input>
                        <button type='submit' style={buttonStyle}>Added</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask2;

 

3. 단계 3

• state를 활용
• state -> tasks:[] -> taskArray

class AddTask3 extends React.Component {
    constructor() {
        super();

        this.state = {
            tasks: []
        }
    }

    addTask = e => {
        e.preventDefault();

        let taskArray = this.state.tasks;

        if(this._input.value != '') {
            taskArray.push(
                {
                    key: Date.now(),
                    msg: this._input.value
                }
            );
        }

        console.log(taskArray);
    };

    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };

        return (
            <div className="main">
                <div className="header">
                    <form onSubmit={this.addTask}>
                        <input
                            type="text"
                            placeholder="Add Task"
                            style={inputStyle}
                            ref={e => this._input=e}
                        >
                        </input>
                        <button type="submit" style={buttonStyle}>Added</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask3;

 

4. 단계 4

• setState() 를 사용해, 상태를 업데이트
• 등록되는 항목에 대한 List 

class AddTask4 extends React.Component {
    constructor() {
        super();
        
        this.state = {
            tasks : []
        };
    }

    addTask = e => {
        e.preventDefault();

        let taskArray = this.state.tasks;

        if(this._input.value !='') {
            taskArray.push(
                {
                    key: Date.now(),
                    msg: this._input.value
                }
            );
        }
        this.setState({
            tasks: taskArray
        });
    }
    
    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };
        let liStyle={
            marginTop: 10
        }

        let data = this.state.tasks;

        let listTasks = data.map(function(task) {
            return <li key={task.key} style={liStyle}>{task.msg}</li>
        })

        return (
            <div className='main'>
                <div className='header'>
                    <form onSubmit={this.addTask}>
                    <input
                            type="text"
                            placeholder="Add Task"
                            style={inputStyle}
                            ref={e => this._input=e}
                        >
                        </input>
                        <button type="submit" style={buttonStyle}>Added</button>
                        <ul>
                            {listTasks}
                        </ul>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask4;

 

5. 단계 5

• src/AddTask.js
• TaskList -> 컴포넌트로 분리하여, import 방식으로 사용

class AddTask5 extends React.Component {
    constructor() {
        super();

        this.state = {
            tasks : []
        }
    }

    addTask = e => {
        e.preventDefault();

        let taskArray = this.state.tasks;

        if(this._input.value != '') {
            taskArray.push({
                key: Date.now(),
                msg: this._input.value
            })
        }

        this.setState({
            tasks: taskArray
        })
    }
    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        }

        return (
            <div className='main'>
                <div className='header'>
                    <form onSubmit={this.addTask}>
                        <input type='text' placeholder='Add Task' style={inputStyle}
                        ref={e => this._input = e}>
                        </input>
                        <button type='submit' style={buttonStyle}>Added</button>
                        <AddTaskList propsValue={this.state.tasks} />
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask5;

• AddTaskList.js
• props의 value를 가져와 date형식으로 변환 후, TODO List를 노출

class AddTaskList extends React.Component {
    render() {
        let liStyle={
            marginTop: 10
        }
        let data=this.props.propsValue;

        let listTasks = data.map(task => {
            let date = new Date(task.key);
            let formattedDate = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ` +
                                `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
        
            return (
                <li key={task.key} style={liStyle}>
                    {task.msg} ({formattedDate})
                </li>
            );
        });

        return (
            <ul>
                {listTasks}
            </ul>
        )
    }
}

export default AddTaskList;