따라하며 배우는 리액트 A-Z
[프론트엔드, 웹 개발] 강의입니다.
이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.
✍️
이런 걸
배워요!
리액트
NextJS
타입스크립트
정적 사이트 자동 배포
도커
강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#
강의 자료 : https://github.com/braverokmc79/DiagramPDF
소스: https://github.dev/braverokmc79/react-todo-app
[2].간단한 To-Do 앱 만들며 리액트 익히기
1.Create React App으로 실행된 리액트의 기본 구조 살펴보기
강의:
2.React App 실행해보기
강의:
3.SPA 란?
4.To-Do 앱 소개 및 JSX 알아보기
5.To-Do 앱 만들기 시작
App.js
import React, { Component, component } from "react";
import "./App.css";
export default class App extends Component {
render() {
return (
할일 목록
) } }
6.할 일 목록 UI 만들기(JSX, CSS 작성)
강의:
App.js
import React, { Component, component } from "react";
import "./App.css";
export default class App extends Component {
btnStyle = {
color: "#fff",
border: "none",
padding: "5px 9px",
borderRadius: "50%",
cursor: "pointer",
float: "right"
}
getStyle = () => {
return {
padding: "10px",
borderBottom: "1px #ccc dotted",
textDecoration: "none"
}
}
render() {
return (
할일 목록
) } }
7.Map 메소드를 사용한 할 일 목록 나열
강의:
App.js
import React, { Component } from "react";
import "./App.css";
export default class App extends Component {
btnStyle = {
color: "#fff",
border: "none",
padding: "5px 9px",
borderRadius: "50%",
cursor: "pointer",
float: "right"
}
getStyle = () => {
return {
padding: "10px",
borderBottom: "1px #ccc dotted",
textDecoration: "none"
}
}
todoData = [{
id: "1",
title: "공부하기",
completed: false,
},
{
id: "2",
title: "청소하기",
completed: true
}
]
render() {
return (
할일 목록
) } }
8.JSX Key 속성 이해하기
강의:
9.Filter 메소드를 사용해서 할 일 목록 지우기
강의:
App.js
import React, { Component } from "react";
import "./App.css";
export default class App extends Component {
btnStyle = {
color: "#fff",
border: "none",
padding: "5px 9px",
borderRadius: "50%",
cursor: "pointer",
float: "right"
}
getStyle = () => {
return {
padding: "10px",
borderBottom: "1px #ccc dotted",
textDecoration: "none"
}
}
todoData = [{
id: "1",
title: "공부하기",
completed: false,
},
{
id: "2",
title: "청소하기",
completed: true
}
]
handleClick = (id) => {
let newTodoData = this.todoData.filter(data => data.id !== id);
console.log(" newTodoData : ", newTodoData);
}
render() {
return (
할일 목록
) } }
10.React State 란?
강의:
App.js
~
state = {
todoData:
[{
id: "1",
title: "공부하기",
completed: false,
},
{
id: "2",
title: "청소하기",
completed: true
}
],
value: ""
}
handleClick = (id) => {
let newTodoData = this.state.todoData.filter(data => data.id !== id);
console.log(" newTodoData : ", newTodoData);
this.setState({ todoData: newTodoData });
}
~
11.할일 목록 추가하기
강의 :
12.전개 연산자
13.마무리 된 일 표시하기(조건부 삼항 연산자)
App.js
import React, { Component } from "react";
import "./App.css";
export default class App extends Component {
btnStyle = {
color: "#fff",
border: "none",
padding: "5px 9px",
borderRadius: "50%",
cursor: "pointer",
float: "right"
}
getStyle = (completed) => {
return {
padding: "10px",
borderBottom: "1px #ccc dotted",
textDecoration: completed ? "line-through" : "none"
}
}
state = {
todoData:
[{
id: "1",
title: "공부하기",
completed: false,
},
{
id: "2",
title: "청소하기",
completed: true
}
],
value: ""
}
handleClick = (id) => {
let newTodoData = this.state.todoData.filter(data => data.id !== id);
console.log(" newTodoData : ", newTodoData);
this.setState({ todoData: newTodoData });
}
handleChnage = (e) => {
console.log(" e :", e.target.value);
this.setState({ value: e.target.value })
}
handleSubmit = (e) => {
e.preventDefault();
let newTodoData = {
id: Date.now(),
title: this.state.value,
completed: false
}
this.setState({ todoData: [...this.state.todoData, newTodoData], value: "" })
}
handleCompleteChange = (id) => {
let newTodoData = this.state.todoData.map(data => {
if (data.id === id) {
data.completed = !data.completed
}
return data;
});
this.setState({ todoData: newTodoData })
}
render() {
return (
<div className="container">
<div className="todoBlock">
<div className="title">
<h1>할일 목록</h1>
</div>
<form style={{ display: 'flex' }} onSubmit={this.handleSubmit}>
<input
type="text"
name="value"
style={{ flex: "10", padding: "5px" }}
placeholder="해야 할일을 입력 하세요."
value={this.state.value}
onChange={this.handleChnage}
/>
<input
type="submit"
name="입력"
className="btn"
style={{ flex: '1' }}
/>
</form>
{this.state.todoData.map(data => {
return (
<div style={this.getStyle(data.completed)} key={data.id}>
<input type="checkbox" defaultChecked={data.completed} onChange={() => this.handleCompleteChange(data.id)} />
{data.title}
<button style={this.btnStyle} onClick={() => this.handleClick(data.id)}>x</button>
</div>
)
})}
</div>
</div >
)
}
}
댓글 ( 4)
댓글 남기기