반응형
아래 단계별로 연습하기
[contents]
1. 버튼 + - 누르면 수 가감 되게 만들기
2. Create 댓글 추가하기
3. Delete 댓글 삭제하기
4. Update 댓글 수정하기
1. 버튼 + -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REACT TIME</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App =()=>{
const [number, setNumber] = React.useState(0)
const onChange = (e)=>{
setNumber(e.target.value)
}
const on =()=>{
setNumber(number+1)
}
const down =()=>{
setNumber(number-1)
}
return(
<>
<input type="text" value={number} onChange={onChange}/>
<button onClick={on}>+</button>
<button onClick={down}>-</button>
</>
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
2. 댓글 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REACT TIME</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
const [text, setText] = React.useState('')
const [list, setList] = React.useState([])
const onChange = (e) => {
setText(e.target.value)
}
const submit =(e)=>{
e.preventDefault()
list.push(text)
setList(list)
setText('')
}
return (
<>
<form onSubmit ={submit} >
<input type="text" value={text} onChange={onChange} />
<button type="submit">추가</button>
</form>
<ul>
{
list.map((v, k) => {
return <li key={k}>{v}</li>
})
}
</ul>
</>
)
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>댓글 추가를 reducer 사용해서 만들어 보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REACT TIME</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const reducer=(state, action)=>{
switch(action.type){
case 'change':
return{
...state,
text:action.payload.text,
}
case 'submit':
state.list.push(state.text)
return{
...state,
text:'',
}
}
}
const App =()=>{
const statehere = {
list:[],
text:'',
}
const [state, dispatch] = React.useReducer(reducer,statehere)
const change=(e)=>{
dispatch({type:'change', payload:{text:e.target.value}})
}
const submit=(e)=>{
e.preventDefault()
dispatch({type:'submit'})
}
return(
<>
<form onSubmit={submit}>
<input type="text" value={state.text} onChange={change} />
<button type="submit"> 추가 </button>
</form>
<ul>
{
state.list.map((v,k)=>{
return <li key={k}>{v}</li>
})
}
</ul>
</>
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
3. 댓글 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REACT TIME</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const reducer=(state,action)=>{
switch(action.type){
case 'change':
return{
...state,
text:action.payload.text
}
case 'submit':
state.list.push(state.text)
return{
...state,
text:'',
}
case 'delete':
return{
...state,
list: state.list.filter((v,k)=>{
return k!=action.payload.k
})
}
}
}
const initState={
text:"",
list:[],
}
const App =()=>{
const [state, dispatch] = React.useReducer(reducer, initState)
const change=(e)=>{
dispatch({type:'change', payload:{text:e.target.value}})
}
const submit=(e)=>{
e.preventDefault()
dispatch({type:'submit'})
}
const deleteit=(k)=>{
dispatch({type:'delete', payload:{k}})
}
return(
<>
<form onSubmit={submit}>
<input type="text" onChange={change} value={state.text}/>
<button type="submit">+</button>
</form>
<ul>
{
state.list.map((v,k)=>{
return <li key={k}>{v}<button onClick={()=>deleteit(k)}>X</button></li>
})
}
</ul>
</>
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
4. 댓글 수정
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [95일차]20210726 react Link, head, title, css, 라우터, 폰트, 이미지 넣기, 핸드폰과 연동하기 (0) | 2021.07.26 |
|---|---|
| [94일차]20210723 front server 연결 / Next 설치 (0) | 2021.07.23 |
| [93일차] 20210722 Front api restful fetch / 리액트 CRUD (0) | 2021.07.22 |
| [92일차 복습] front + back React Webpack aws server로 가져오기 (0) | 2021.07.21 |
| [92일차]20210721 aws-back-server & local-back-server 연결 (0) | 2021.07.21 |
