React
[React] CDN방식 넣기, React기초
euge
2023. 3. 2. 16:39
CDN방식
React JS를 사용하기 위한 준비
JSX : script안에서 작성
html비슷하지만 html은 아님, 단독태그끝에 /넣어야함) React에서 html 태그처럼 사용
두개 이상의 요소를 랜더링하려면 div로 감싼다.
img, br, hr등 단독태그 끝에 /슬래시를 꼭 넣는다.
ReactDom.render() : JSX요소나 컴포넌트를 마운트요소에 출력
ReactDOM.render(
JSX요소 또는 <컴포넌트 />, 마운트요소
);<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리액트</title>
<style>
#wrap{border: 10px dashed black; padding: 10px;}
.s1{color: blueviolet;}
</style>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="wrap"></div>
<script type="text/babel">
let i =7;
ReactDOM.render(
<div>
<h1>제목</h1>
<h2>안녕{i}</h2>
<img src="" alt="" />
<p class="s1">안녕하세요.</p>
</div>
,
document.querySelector("#wrap") // 출력될 위치(요소)
);
</script>
</body>
</html>Component 컴포넌트.
컴포넌트 정의, 컴포넌트명은 대문자로 시작해야한다.(파스칼표기법)
class 컴포넌트명 extends React.Component {
render(){
return JSX작성
}
}
ReactDOM.render(
<컴포넌트명 />, 마운트대상요소
);<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리액트</title>
<style>
#wrap{border: 10px dashed black; padding: 10px;}
.room{border: 20px solid hotpink; padding: 20px; margin: 10px;}
.kitchen{border: 20px solid rgb(182, 255, 87); padding: 20px; margin: 10px;}
.living{border: 20px solid rgb(128, 105, 255); padding: 20px; margin: 10px;}
</style>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="wrap">
</div>
<script type="text/babel">
class Room extends React.Component {
render(){
return <div className="room">
<h1>방</h1>
<p>방입니다.</p>
</div>
}
}
class Kitchen extends React.Component {
render(){
return <div className="kitchen">
<h1>부엌</h1>
<p>부엌입니다.</p>
</div>
}
}
class Living extends React.Component {
render(){
return <div className="living">
<h1>거실</h1>
<p>거실입니다.</p>
</div>
}
}
ReactDOM.render(
<div>
<Room />
<Kitchen />
<Living />
</div>
,
document.querySelector("#wrap")
);
</script>
</body>
</html><!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리액트</title>
<style>
*{margin: 0; padding: 0;}
ul{list-style: none;}
#wrap{border:20px;}
.Header {border:20px solid #0cc; margin:10px;}
.Contents {
margin: 10px auto;
border:20px solid rgb(67, 126, 255);
max-width:1200px;
}
.Footer {border:20px solid rgb(255, 183, 247); margin:10px;}
.group{display: flex; flex-wrap: wrap;}
.Box{
width:50%;
margin:10px 0;
border:10px solid orange;
box-sizing: border-box;
}
.Box img{width:100%;}
</style>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="wrap">
</div>
<script type="text/babel">
class Header extends React.Component {
render(){
return <header className="Header">
<h1>LOGO</h1>
<Gnb />
</header>
}
}
class Gnb extends React.Component {
render(){
return <nav className="Gnb">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
}
}
class Contents extends React.Component {
render(){
return <section className="Contents">
<h2>컨텐츠</h2>
<div className="group">
<Box name="박스1" img="images/insta1.jpg" />
<Box name="박스2" img="images/insta2.jpg"/>
<Box name="박스3" img="images/insta3.jpg"/>
<Box name="박스4" img="images/insta1.jpg"/>
</div>
</section>
}
}
class Box extends React.Component {
render(){
return <div className="Box">
<p>{this.props.name}</p>
<img src={ this.props.img }/>
</div>
}
}
class Footer extends React.Component {
render(){
return <footer className="Footer">
Footer
</footer>
}
}
ReactDOM.render(
<div>
<Header></Header>
<Contents></Contents>
<Footer></Footer>
</div>,
document.querySelector("#wrap")
);
</script>
</body>
</html>Props 속성
props는 properties를 줄인 표현으로 부모 컴포넌트로부터 물려받는 속성이다. 클래스 컴포넌트에서 props에 접근하기 위해서는 this 키워드를 사용하면 된다.이 props값은 해당 컴포넌트를 불러와서 사용하는 부모 컴포넌트에서만 설정할 수 있다.부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트된다.
{this.props.속성명}
class AA extends React.Component {
render(){
return <p>안녕하세요 { this.props.속성명 }</p>
}
}
ReactDOM.render(
<div>
<AA 속성명="값"></AA>
</div>,
document.querySelector("#wrap")
);
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리액트</title>
<style>
#wrap{border: 10px dashed black; padding: 10px;}
.room{border: 20px solid hotpink; padding: 20px; margin: 10px;}
</style>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="wrap"></div>
<script type="text/babel">
class Room extends React.Component {
render(){
return <div className="room">
<h1>{this.props.num}번 방</h1>
<p>{this.props.name}방입니다.</p>
</div>
}
}
ReactDOM.render(
<div>
<Room name="철수" num="01"></Room>
<Room name="영희" num="02"></Room>
<Room name="민준" num="03"></Room>
</div>
,
document.querySelector("#wrap")
);
</script>
</body>
</html>{this.props.children}
class Room extends React.Component {
render(){
return <div className="room">
<h1>방</h1>
<p>{this.props.children}방입니다.</p>
</div>
}
}
ReactDOM.render(
<div>
<Room>철수</Room>
<Room>영희</Room>
<Room>민준</Room>
</div>
,
document.querySelector("#wrap")
); class Room extends React.Component {
render(){
return <div className="room">
<h1>{this.props.tit}</h1>
<p>{this.props.children}</p>
</div>
}
}
ReactDOM.render(
<div>
<Room tit="방1">철수입니다.</Room>
<Room tit="방2">영희입니다.</Room>
<Room tit="방3">민준입니다.</Room>
</div>
,
document.querySelector("#wrap")
);State 스테이트.
State : 리액트에서 사용할 데이터 저장 (변수 비슷한 건데 변수는 아님.)
constructor(props){ // constructor함수안에 있는 것이 가장 먼저 실행된다.
super(props);
this.state = { 변수명:변수값 }
}
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리액트</title>
<style>
</style>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="wrap"> </div>
<script type="text/babel">
class Counter extends React.Component {
constructor(props){
super(props);
this.state = {
a:7,
b:5,
k:"안녕"
}
}
render(){
return(
<h1>안녕{this.state.a}</h1>
);
}
}
ReactDOM.render(
<div>
<Counter />
</div>,
document.querySelector("#wrap")
);
</script>
</body>
</html>react에서 온클릭 실행방법 1 // 직접 함수생성
<button onClick={()=>{alert(333);}}>버튼</button>
react에서 온클릭 실행방법 2 // 생성된 함수 실행
AA(){
alert("안녕하세요");
}
<button onClick={ this.AA }>버튼</button>
this.state = {a:0} // 초기값
this.setState({a: this.state.a +1}) // 변경값 // 1을 증
this.함수명 =this.함수명.bind(this); //스테이트 값이 변경될 경우 함수에 this를 바인딩시켜야한다.
-----생략-----
<script type="text/babel">
class Counter extends React.Component {
constructor(props){
super(props);
this.state = {a:0}
this.AA =this.AA.bind(this); //스테이트 값이 변경될 경우 함수에 thiuis를 바인딩시켜야한다.
}
AA(){
this.setState({ a: this.state.a + 1 }) //a값을 1증가
}
render(){
return(
<div>
<h1>카운터{this.state.a}</h1>
<button onClick={this.AA}>버튼</button>
</div>
);
}
}
ReactDOM.render(
<div>
<Counter />
</div>,
document.querySelector("#wrap")
);
</script>
</body>
</html>
클래스형 => State O
함수형 => State X ---> useState