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>Document</title>
</head>
<body>
<script>
let arr = [1,2,3,4,5];
let a = arr[0];
let b = arr[1];
let [c,d] = arr;
let newobj = {
name: 'bella',
age: 30,
}
let name1 = newobj['name'];
let age1 = newobj['age'];
let { name, age:ag } = newobj;
</script>
</body>
</html>2) react 구문
App.js
import './App.css';
import React from 'react';
import MyComponent from './MyComponent';
import MyComponentClass from './MyComponentClass';
import Counter from './Counter';
import CounterF from './CounterF';
function App() {
const name = "리액트";
return (
// * JSX에서 자바스크립트 표현식을 사용하려면 {}로 감싼다.
// * if문 대신 조건부 연산자 - 삼항연산자를 사용.
<div className='react'>
{/* <h1>{name=='리액트' ? (<span>리액트입니다.</span>) : null}</h1>
<MyComponent name='Green' age='30'><h3>하하하</h3></MyComponent>
<MyComponent name='Blue' age={50}>새과목</MyComponent> */}
{/* <MyComponentClass name='classGreen' age={30}>
<h3>children</h3>
</MyComponentClass>
<MyComponentClass></MyComponentClass> */}
{/* <Counter></Counter> */}
<CounterF></CounterF>
<h2>하이하이</h2>
<input type="text"></input>
</div>
);
// return React.createElement("div", null, "Hello", React.createElement("b",null,"react"))
}
export default App;MyComponent.js
// const MyComponent = () => {
// return <div>새로운 컴포넌트 생성</div>
// }
// function MyComponent(){
// return <div>새로운 컴포넌트 생성</div>
// }
// export default MyComponent;
import React from 'react';
// const MyComponent = (props) => {
// const { name, age, children} = props;
// return (
// <div>
// 안녕하세요 제 이름은 {name}입니다.<br/>
// 제 나이는 {age}입니다.
// </div>
// );
// };
const MyComponent = ({name,age,children}) => {
return (
<div>
안녕하세요 제 이름은 {name}입니다.<br/>
제 나이는 {age}입니다.
{children}입니다.
</div>
);
};
// props 기본값 설정
MyComponent.defaultProps = {
name: "기본이름",
age: 1,
};
export default MyComponent;MyComponentClass.js
import { Component } from "react";
class MyComponentClass extends Component {
render(){
const { name, age, children} = this.props;
return(
<div>
제 이름은 {name}입니다.
나이는 {age}입니다.
{children}입니다.
</div>
);
};
}
MyComponentClass.defaultProps = {
name: '기본이름',
age: 20,
children: 'aaa',
}
export default MyComponentClass;Counter.js
import { Component } from "react";
class Counter extends Component {
//컴포넌트 생성자 메소드
//클래스형 컴포넌트에서 constructor를 작성시 필수 super(props)
//리액트의 component 클래스가 지난 생성자 함수를 호출!
// constructor(props) {
// super(props);
// this.state = {
// number: 0,
// fixedNumber: 0,
// }
// }
state = {
number: 0,
fixedNumber: 0,
}
render() {
const { number, fixedNumber } = this.state;
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button onClick={()=>{
this.setState({ number: number+1 },()=>{
console.log('setState가 호출되었습니다.');
});
}}> +1 </button>
</div>
);
}
}
export default Counter;
CounterF.js
import React, { useState } from 'react';
const CounterF = () => {
// useState함수를 호출하면 배열을 반환해줌
// 배열에 0번째에는 초기값
// 배열의 1번째에는 이 값의 업데이터해주는 함수
const [message, setMessage] = useState('안녕');
const onClickenter = ()=> setMessage('안녕하세요!');
const onClickleave = ()=> setMessage('안녕히가세요!');
return (
<div>
<button onClick={onClickenter}>입장</button>
<button onClick={onClickleave}>퇴장</button>
<p>{message}</p>
</div>
);
};
export default CounterF;EventPractice.js
import { Component } from "react";
class EventPractice extends Component {
state = {
message: '',
}
render(){
return(
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="아무거나 입력하세요"
onChange={(e)=>{
console.log(e.target.value);
this.setState({
message: e.target.value
})
}}></input>
<button onClick={()=>{
console.log(this.state.message);
}}>확인</button>
</div>
)
}
}
// import React, { useState } from 'react';
// const EventPractice = ()=>{
// const [message, setState] = useState('');
// return (
// <div>
// <h1>이벤트 연습</h1>
// <input type="text" name="message" placeholder="아무거나 입력하세요"
// onChange={(e)=>{
// console.log(e.target.value);
// this.setState({
// message: e.target.value
// })
// }}></input>
// <button onClick={()=>{
// console.log(this.state.message);
// }}>확인</button>
// </div>
// );
// };
export default EventPractice;
'노력이 좋아서' 카테고리의 다른 글
| <step64>'react_배열' (0) | 2022.06.21 |
|---|---|
| <step64>'react_event, ref' (0) | 2022.06.21 |
| <step63>'js_wave' (0) | 2022.06.20 |
| <step62>'js_canvas_module' (0) | 2022.06.17 |
| <step62>'js_canvas_jumpGame' (0) | 2022.06.17 |