업무 리스트 예제 제작하기
1단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// js/App.js
import React, { Component } from "react";
import AddTask from "./AddTask";
import "./App.css";
class App extends Component {
render() {
return (
<div className="container">
<h1>React Example</h1>
<AddTask />
</div>
);
}
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// src/AddTask.js
import React, { Component } from "react";
class AddTask extends 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단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// src/AddTask.js
import React, { Component } from "react";
class AddTask extends 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)} // HTML 요소의 레퍼런스를 변수에 저장!
></input>
<button type="submit" style={buttonStyle}>
Added
</button>
</form>
</div>
</div>
);
}
}
export default AddTask;
3단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// src/AddTask.js
import React, { Component } from "react";
class AddTask extends 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
});
}
};
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"
};
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 AddTask;
4단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// src/AddTask.js
import React, { Component } from react;
class AddTask extends 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 liTasks = 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 AddTask;
5단계:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// src/AddTask.js
import React, { Component } from "react";
import AddTaskList from "./AddTaskList";
class AddTask extends 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 AddTask;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/AddTaskList.js
import React, { Component } from "react";
class AddTaskList extends Component {
render() {
let liStyle = { marginTop: 10 };
let data = this.props.propsValue;
let listTasks = data.map((task) => (
<li key={task.key} style={liStyle}>
{task.msg}
</li>
));
return <ul>{listTasks} </ul>;
}
}
export default AddTaskList;