반응형
[77일차 복습]
React Components 댓글 등록, 수정, 삭제 만들기
App : 브라우저 전체
Comment : 댓글 Component
Comment Layout : 댓글창 layout (기능없고 그냥 담는 div같은 요소)
Comment Form : 댓글 입력창 (form, input, button)
Comment List : 댓글이 달리고 수정, 삭제되는 창
1. 위의 기본 Components 작성
<!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>리액트 시간</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>
<link rel="stylesheet" href="./a1.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class CommentForm extends React.Component{
render(){
return(
)
}
}
class CommentList extends React.Component{
render(){
return(
)
}
}
class CommentLayout extends React.Component{
render(){
return(
<ul className="comment">
{this.props.children}
</ul>
)
}
}
class Comment extends React.Component{
render(){
return(
<CommentLayout>
<CommentForm/>
<CommentList/>
</CommentLayout>
)
}
}
class App extends React.Component{
render(){
return(
<Comment/>
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
2. 내용 입력
class CommentForm extends React.Component{
render(){
return(
<li className="comment-form">
<form>
<h4>댓글쓰기(1)</h4>
<span className="ps_box">
<input type="text" placeholder="댓글을 입력해주세요" className="int" />
</span>
<input type="submit" value="등록" className="btn"/>
</form>
</li>
)
}
}
class CommentList extends React.Component{
render(){
return(
<>
<li>
<ul className="comment-row">
<li className="comment-id">ID입니다</li>
<li className="comment-content">내용입니다</li>
<li className="comment-date">2021-06-28</li>
</ul>
</li>
</>
)
}
}
3. Comment에 componentDidMount() 함수로 state 다시 set
+ CommentList로 가져가서 뿌려주기
+ 댓글쓰기 ( 요기 ) 괄호 안에 length 넣기
<body>
<div id="root"></div>
<script type="text/babel">
class CommentForm extends React.Component {
render() {
return (
<li className="comment-form">
<form>
<h4>댓글쓰기(1)</h4>
<span className="ps_box">
<input type="text" placeholder="댓글을 입력해주세요" className="int" />
</span>
<input type="submit" value="등록" className="btn" />
</form>
</li>
)
}
}
class CommentList extends React.Component {
renderList = () => {
return (
this.props.items.map((item, k) => {
return (
<li key = {k}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li className="comment-content">{item.content}</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
render() {
return (
<>
{this.renderList()}
</>
)
}
}
class CommentLayout extends React.Component {
render() {
return (
<ul className="comment">
{this.props.children}
</ul>
)
}
}
class Comment extends React.Component {
state = {
list: []
}
onCreate = (data) => {
console.log(data)
}
componentDidMount() {
let list = [
{ userid: 'emily', content: '배고파', date: '2021-07-01' },
{ userid: 'emily1', content: '배고팟', date: '2021-07-02' },
{ userid: 'emily2', content: '배고팝', date: '2021-07-03' },
]
this.setState({ list })
}
render() {
return (
<CommentLayout>
<CommentForm
onCreate={this.onCreate}
/>
<CommentList
items={this.state.list}
/>
</CommentLayout>
)
}
}
class App extends React.Component {
render() {
return (
<Comment />
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
4. 댓글 등록하기
input box에 쓴 글을 CommentForm state content에 저장하고 Submit 함수를 통해 상위Component로 보내기
상위 Component = Comment 에서 받은 내용을 다시 newList로 만들어 setState 하기
<body>
<div id="root"></div>
<script type="text/babel">
class CommentForm extends React.Component {
state = {
content: '',
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
handleSubmit = (e) => {
e.preventDefault()
this.props.onCreate(this.state.content)
this.setState({content:''})
}
render() {
return (
<li className="comment-form">
<form onSubmit={this.handleSubmit}>
<h4>댓글쓰기({this.props.items.length})</h4>
<span className="ps_box">
<input
type="text"
placeholder="댓글을 입력해주세요"
className="int"
name="content"
value={this.state.content}
onChange={this.handleChange}
/>
</span>
<input type="submit" value="등록" className="btn" />
</form>
</li>
)
}
}
class CommentList extends React.Component {
renderList = () => {
return (
this.props.items.map((item, k) => {
return (
<li key={k}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li className="comment-content">{item.content}</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
render() {
return (
<>
{this.renderList()}
</>
)
}
}
class CommentLayout extends React.Component {
render() {
return (
<ul className="comment">
{this.props.children}
</ul>
)
}
}
class Comment extends React.Component {
state = {
list: []
}
onCreate = (data) => {
let item = {userid:'newID', content:data, date:'2021-07-01'}
let {list} = {...this.state}
let newList = [...list, {...item}]
this.setState({list:newList})
}
componentDidMount() {
let list = [
{ userid: 'emily', content: '배고파', date: '2021-07-01' },
{ userid: 'emily1', content: '배고팟', date: '2021-07-02' },
{ userid: 'emily2', content: '배고팝', date: '2021-07-03' },
]
this.setState({ list })
}
render() {
return (
<CommentLayout>
<CommentForm
onCreate={this.onCreate}
items={this.state.list}
/>
<CommentList
items={this.state.list}
/>
</CommentLayout>
)
}
}
class App extends React.Component {
render() {
return (
<Comment />
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
5. 댓글 삭제하기
class CommentList extends React.Component {
renderList = () => {
return (
this.props.items.map((item, k) => {
return (
<li key={k}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li className="comment-content">
{item.content}
<span className="comment-delete-btn"
onClick={()=>{this.props.onDelete(k)}}
>
x
</span>
</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
render() {
return (
<>
{this.renderList()}
</>
)
}
}
------------------
onDelete = (k) =>{
let newList = this.state.list.filter((v,i)=>{
if(i!=k){
return v
}
})
this.setState({list:newList})
}
-------------------
render() {
return (
<CommentLayout>
<CommentForm
onCreate={this.onCreate}
items={this.state.list}
/>
<CommentList
items={this.state.list}
onDelete={this.onDelete}
/>
</CommentLayout>
)
}
k값을 받아와서 ==index
filter로 i값과 같으면 return하지 않도록 하기 ! 아래 두 코드는 같다
onDelete = (k) =>{
let newList = this.state.list.filter((v,i)=>{
if(i!=k){
return v
}
})
this.setState({list:newList})
}-
onDelete = (k) =>{
let newList = this.state.list.filter((v,i)=>{
return i!==k
})
this.setState({list:newList})
}
6. 댓글 수정하기
CommentList에 state, onClick 함수 만들기
CommentList 댓글에 span을 주어서 onClick 함수 주고 해당 함수는 CommentList - state- content, k를 갱신
1)
content를 클릭하는 해당 index 의 key값을 state에 저장하고 이 수가 클릭하는 인덱스와 같은 경우 'input' 보이기 / 아니면 item.content 보여주기 -> 다른 걸 클릭하면 input 되어있던 요소는 다시 돌아옴 ! (k가 계속 클릭으로 바뀌어서)
class CommentList extends React.Component {
state={
content:'',
k:Infinity,
}
handleClick=(k) =>{
this.setState({k})
}
renderList = () => {
return (
this.props.items.map((item, k) => {
return (
<li key={k}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li className="comment-content">
<span onClick={()=>this.handleClick(k)}>
{k===this.state.k ? 'input' : item.content}
</span>
<span className="comment-delete-btn"
onClick={()=>{this.props.onDelete(k)}}
>
x
</span>
</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
2) 'input' 넣을 공간에 많은게 들어가서 함수로 빼기
onChange 함수로 쓸 때마다 setState: content 를 e.target.value로 바꾸기
onKeydown 엔터 누르면 상위(Comment)의 함수 onUpdate로 this.state.k, content를 보내서 reset 해주기
전체 완성 코드
<!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>리액트 시간</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>
<link rel="stylesheet" href="./a1.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class CommentForm extends React.Component {
state = {
content: '',
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
handleSubmit = (e) => {
e.preventDefault()
this.props.onCreate(this.state.content)
this.setState({content:''})
}
render() {
return (
<li className="comment-form">
<form onSubmit={this.handleSubmit}>
<h4>댓글쓰기({this.props.items.length})</h4>
<span className="ps_box">
<input
type="text"
placeholder="댓글을 입력해주세요"
className="int"
name="content"
value={this.state.content}
onChange={this.handleChange}
/>
</span>
<input type="submit" value="등록" className="btn" />
</form>
</li>
)
}
}
class CommentList extends React.Component {
state={
content:'',
k:Infinity,
}
handleClick=(k) =>{
this.setState({k})
}
handleChange=(e)=>{
this.setState({[e.target.name]:e.target.value})
}
handleEnter=(e)=>{
if(e.key==='Enter'){
let {k, content} = {...this.state}
this.props.onUpdate(k,content)
this.setState({k:Infinity,content:''})
}
}
inputBox = (content) =>{
return(
<input
type="text"
className="comment-update-input"
defaultValue={content}
name='content'
onChange={this.handleChange}
onKeyDown={this.handleEnter}
/>
)
}
renderList = () => {
return (
this.props.items.map((item, k) => {
return (
<li key={k}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li className="comment-content">
<span onClick={()=>this.handleClick(k)}>
{k===this.state.k ? this.inputBox(item.content) : item.content}
</span>
<span className="comment-delete-btn"
onClick={()=>{this.props.onDelete(k)}}
>
x
</span>
</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
render() {
return (
<>
{this.renderList()}
</>
)
}
}
class CommentLayout extends React.Component {
render() {
return (
<ul className="comment">
{this.props.children}
</ul>
)
}
}
class Comment extends React.Component {
state = {
list: []
}
onCreate = (data) => {
let item = {userid:'newID', content:data, date:'2021-07-01'}
let {list} = {...this.state}
let newList = [...list, {...item}]
this.setState({list:newList})
}
onDelete = (k) =>{
let newList = this.state.list.filter((v,i)=>{
return i!==k
})
this.setState({list:newList})
}
onUpdate =(index, content)=>{
console.log(index,content)
let {list} = {...this.state}
list[index].content=content
console.log(this.state.list)
this.setState({list})
console.log(this.state.list)
}
componentDidMount() {
let list = [
{ userid: 'emily', content: '배고파', date: '2021-07-01' },
{ userid: 'emily1', content: '배고팟', date: '2021-07-02' },
{ userid: 'emily2', content: '배고팝', date: '2021-07-03' },
]
this.setState({ list })
}
render() {
return (
<CommentLayout>
<CommentForm
onCreate={this.onCreate}
items={this.state.list}
/>
<CommentList
items={this.state.list}
onDelete={this.onDelete}
onUpdate={this.onUpdate}
/>
</CommentLayout>
)
}
}
class App extends React.Component {
render() {
return (
<Comment />
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>
해당 content이외의 곳을 클릭했을 때 수정되도록 만든 코드
-> 위의 방식대로 CommentList에 state, 함수를 넣어서 값을 상위로 올리면 더 코드가 간결해질 것 같다 !
<!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>리액트 시간</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>
<link rel="stylesheet" href="./a1.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class CommentForm extends React.Component {
state = {
content: '',
}
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
handleSubmit = (e) => {
console.log(this.props.onCreate)
e.preventDefault()
this.props.onCreate(this.state.content)
this.setState({ content: '' })
}
render() {
return (
<li className="comment-form">
<form onSubmit={this.handleSubmit}>
<h4>댓글쓰기 <span>({this.props.count})</span></h4>
<span className="ps_box">
<input
type="text"
placeholder="댓글내용을 입력해주세요."
className="int"
name="content"
value={this.state.content}
onChange={this.handleChange}
/>
</span>
<input type="submit" value="등록" className="btn" />
</form>
</li>
)
}
}
class CommentList extends React.Component {
renderList = () => {
return (
this.props.items.map((item, k) => {
return (
<li key={k}>
<ul className="comment-row">
<li className="comment-id">{item.userid}</li>
<li
className="comment-content"
onClick={() => { this.props.inputChange(k) }}
//onMouseOut={() => this.props.inputMouseOut(k)}
onChange={() => { this.props.onChange(k) }}
value={item.content}
>
{item.content}
<span
className="comment-delete-btn"
onClick={() => { this.props.onDelete(k) }}
>
x
</span>
</li>
<li className="comment-date">{item.date}</li>
</ul>
</li>
)
})
)
}
render() {
return (
<>
{this.renderList()}
</>
)
}
}
class CommentLayout extends React.Component {
render() {
return (
<ul className="comment">
{this.props.children}
</ul>
)
}
}
class Comment extends React.Component {
state = {
list: [],
}
REF = React.createRef();
onCreate = (data) => {
let item = { userid: 'dddd', content: data, date: '2021-07-04' }
let { list } = { ...this.state }
let newList = [...list, { ...item }]
this.setState({ list: newList })
}
onDelete = (data) => {
let { list } = { ...this.state }
let newList = list.filter((value, index) => {
return data !== index
})
this.setState({ list: newList })
}
// content 클릭하면 input box 보이게
inputChange = (k) => {
let { list } = { ...this.state }
let newList = list.filter((value, index) => {
if (index === k) {
value.content = <input type="text" name="content" className="comment-update-input" defaultValue={value.content} />
return value
} else {
return value
}
})
this.setState({ list: newList, inputOrNot: true })
}
//글자 수정할 때 state 수정 ->
onChange = (e) => {
let update = document.querySelector('.comment-update-input')
let { list } = { ...this.state }
let newList = list.filter((v, i) => {
if (i == e) {
v.content = <input type="text" name="content" className="comment-update-input" defaultValue={update.value} />
return v
} else {
return v;
}
})
this.setState({ list: newList })
}
// 클릭하면 저장
onModify = (e) => {
let update = document.querySelector('.comment-update-input')
if (e.target != update) {
let idx;
for (let i = 0; i < this.state.list.length; i++) {
//console.log(this.state.list[i].content.props)
if (this.state.list[i].content.props != undefined) {
idx = i
}
}
let { list } = { ...this.state }
let newList = list.filter((v, i) => {
if (i == idx) {
v.content = update.value;
return v;
} else {
return v;
}
})
this.setState({ list: newList })
}
}
componentDidMount() { //생명주기 - Component가 모두 완료되었을 떄 , 화면이 그려진게 완료 되었을 때 한번 더 실행됨
let list = [
{ userid: 'emily', content: '수요일입니다', date: '2021-07-01' },
{ userid: '하잇', content: '목요일입니다', date: '2021-07-02' },
{ userid: '휴먼', content: '금요일입니다', date: '2021-07-03' }
]
this.setState({ list }) // list:list
let update = document.querySelector('.comment-update-input')
document.body.addEventListener('mousedown', this.onModify)
// if(e.target.className !=='comment-update-input'){
// console.log('다른곳을 찍고잇')
// }
}
render() {
return (
<CommentLayout>
<CommentForm
onCreate={this.onCreate}
count={this.state.list.length}
/>
<CommentList
items={this.state.list}
onDelete={this.onDelete}
inputChange={this.inputChange}
inputMouseOut={this.inputMouseOut}
onModify={this.onModify}
//inputOrNot={this.state.inputOrNot}
onChange={this.onChange}
/>
</CommentLayout>
)
}
}
class App extends React.Component {
render() {
return (
<Comment />
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>
[76일차 복습]
{this.props.children} 배움 ! 요거를 return하는 Component는 다른 Components들을 안에 넣어 return할 수 있다.
1. Header- children / Logo, Menu, Utill Components 만들기
<!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>리액트 시간</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>
<link rel="stylesheet" href="./a1.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Logo extends React.Component{
render(){
return(
)
}
}
class Menu extends React.Component{
render(){
return(
)
}
}
class Utill extends React.Component{
render(){
return(
)
}
}
class Header extends React.Component{
render(){
return(
<>
{this.props.children}
</>
)
}
}
class App extends React.Component{
render(){
return(
<Header>
<Logo/>
<Menu/>
<Utill/>
</Header>
)
}
}
ReactCOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>* React는 a tag 를 쓰지 않는다
Reac = Single Page Application -> a를 써서 url 이동하면 의미가 없어짐 !
2. html 내용 채우기
class Logo extends React.Component{
render(){
return(
<h1>Logo</h1>
)
}
}
class Menu extends React.Component{
render(){
return(
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
)
}
}
class Utill extends React.Component{
render(){
return(
<ul>
<li>로그인</li>
<li>회원가입</li>
</ul>
)
}
}
3. inLogin state 값 설정 , 해당 값에 따라 로그인/로그아웃 이 뜨도록 만들기
<div id="root"></div>
<script type="text/babel">
class Logo extends React.Component{
render(){
return(
<h1>Logo</h1>
)
}
}
class Menu extends React.Component{
render(){
return(
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
)
}
}
class Utill extends React.Component{
login = ()=>{
return(
<>
<li>로그인</li>
<li>회원가입</li>
</>
)
}
logout = () => {
return(
<>
<li>로그아웃</li>
<li>회원정보</li>
</>
)
}
render(){
return(
<ul>
{this.props.isLogin ? this.logout() : this.login() }
</ul>
)
}
}
class Header extends React.Component{
render(){
return(
<>
{this.props.children}
</>
)
}
}
class App extends React.Component{
state={
isLogin:false
}
render(){
return(
<Header>
<Logo/>
<Menu/>
<Utill isLogin={this.state.isLogin}/>
</Header>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
App 의 state.isLogin을 true로 수기로 바꿔주면 로그인 / 회원가입 대신 -> 로그아웃 / 회원정보가 뜬다
4. 새로운 html 생성
App, LoginBox - state = userid:'', userpw:''
<!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>리액트 시간</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>
<link rel="stylesheet" href="./example6.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class LoginBox extends React.Component{
state={
userid:'',
userpw:''
}
render(){
return(
<form>
<input type="text" />
<input type="password" />
<button type="submit">로그인</button>
</form>
)
}
}
class App extends React.Component{
state={
}
render(){
return(
<LoginBox />
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
5. LoginBox 안에 설정값 넣기
class LoginBox extends React.Component{
state={
userid:'',
userpw:''
}
render(){
return(
<form>
<input
type="text"
placeholder="아이디를 입력해주세요"
value={this.state.userid}
name="userid"
/>
<input
type="password"
placeholder="비번 입력해주세요"
value={this.state.userpw}
name="userpw"
/>
<button type="submit">로그인</button>
</form>
)
}
}
오류 뜨는 이유 : 해당 value 값이 변경될 때 다시 DOM, render 해야하는데 시점을 모르니 onChange를 넣거나 readOnly를 넣어서 읽기 전용으로만 쓰세요! 의미
6. onChange 넣고 값이 변할 때 state값도 변하도록 하기
class LoginBox extends React.Component{
state={
userid:'',
userpw:''
}
handleChange = (e) =>{
this.setState({[e.target.name]:e.target.value})
}
render(){
return(
<form>
<input
type="text"
placeholder="아이디를 입력해주세요"
value={this.state.userid}
name="userid"
onChange = {this.handleChange}
/>
<input
type="password"
placeholder="비번 입력해주세요"
value={this.state.userpw}
name="userpw"
onChange = {this.handleChange}
/>
<button type="submit">로그인</button>
</form>
)
}
}
7. 하위 -> 상위로 값 넘기기 (함수 사용)
class LoginBox extends React.Component{
state={
userid:'',
userpw:''
}
handleChange = (e) =>{
this.setState({[e.target.name]:e.target.value})
}
letsubmit = (e) =>{
console.log(e)
e.preventDefault()
this.props.onCreate(this.state)
}
render(){
return(
<form onSubmit={this.letsubmit}>
<input
type="text"
placeholder="아이디를 입력해주세요"
value={this.state.userid}
name="userid"
onChange = {this.handleChange}
/>
<input
type="password"
placeholder="비번 입력해주세요"
value={this.state.userpw}
name="userpw"
onChange = {this.handleChange}
/>
<button type="submit">로그인</button>
</form>
)
}
}
class App extends React.Component{
onCreate=(e)=>{
console.log(e)
}
render(){
return(
<LoginBox letsubmit = {this.letsubmit} onCreate={this.onCreate}/>
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
8. 처음 만든 html과 위의 코드를 합치기
id = admin pw = admin을 입력하면 로그인이 되게 만들기 !
<!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>리액트 시간</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>
<link rel="stylesheet" href="./a1.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Logo extends React.Component{
render(){
return(
<h1>Logo</h1>
)
}
}
class Menu extends React.Component{
render(){
return(
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
)
}
}
class Utill extends React.Component{
login = ()=>{
return(
<>
<li>로그인</li>
<li>회원가입</li>
</>
)
}
logout = () => {
return(
<>
<li>로그아웃</li>
<li>회원정보</li>
</>
)
}
render(){
return(
<ul>
{this.props.isLogin ? this.logout() : this.login() }
</ul>
)
}
}
class Header extends React.Component{
render(){
return(
<>
{this.props.children}
</>
)
}
}
class LoginBox extends React.Component{
state={
userid:'',
userpw:''
}
handleChange = (e) =>{
this.setState({[e.target.name]:e.target.value})
}
letsubmit = (e) =>{
console.log(e)
e.preventDefault()
this.props.onCreate(this.state)
}
render(){
return(
<form onSubmit={this.letsubmit}>
<input
type="text"
placeholder="아이디를 입력해주세요"
value={this.state.userid}
name="userid"
onChange = {this.handleChange}
/>
<input
type="password"
placeholder="비번 입력해주세요"
value={this.state.userpw}
name="userpw"
onChange = {this.handleChange}
/>
<button type="submit">로그인</button>
</form>
)
}
}
class App extends React.Component{
state={
isLogin:false
}
onCreate=(e)=>{
let {userid, userpw} = e;
if (userid =='admin' && userpw=='admin'){
this.setState({isLogin:true})
}
}
render(){
return(
<Header>
<Logo/>
<Menu/>
<Utill isLogin={this.state.isLogin}/>
<LoginBox letsubmit = {this.letsubmit} onCreate={this.onCreate}/>
</Header>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| 3주 팀프로젝트 리뷰 (0) | 2021.07.02 |
|---|---|
| [78일차] 20210702 React 리액트 함수형 컴포넌트 (0) | 2021.07.02 |
| [77일차]20210701 React 댓글 수정 삭제 / 리액트로 생각하기 / 합성과 상속 (0) | 2021.07.01 |
| [76일차] 20210630 React 리액트 push, children (0) | 2021.06.30 |
| [75일차 복습] React, state 끌어 올리기 / 리액트 구구단 (0) | 2021.06.29 |
