해당강의는
님의 강으를 보고 정리
이 강의에선
규칙
Html 태그는 꼭 닫아야한다
<div> </div>
가끔 input같은건 안닫아도 되지만 jsx에선 꼭 닫아야한다.
두개이상의 앨리먼트는 하나로 감싸야한다.
다음과 같이
<div>
Hello
</div>
<div>
Bye
</div>
일경우 오류 즉 다시 하나로 감싸줘야함
<div>
<div>
Hello
</div>
<div>
Bye
</div>
</div>
후 버전에는 fragment 생겨서
<fragment>
<div>
Hello
</div>
<div>
Bye
</div>
</fragment>
이런식으로 접근할수있따 그러면 컴파일러가 필요한 엘리먼트인지 확인한다.
자바스크립값을 쓸려면
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 'test';
return (
<div>
<h1>리액트 {name}</h1>
</div>
);
}
}
export default App;
Const는 var대신에 사용되는것인데
왜사용되는가?
furnction test(){
Var a = hi
If(true){
Var a= bye
Console.log(a) -> bye
}
Console.log(a) -> h? Bye? Bye이다
}
스코프가 function단위라서
하지만 lat이나 const 바꾼다면
furnction test(){
let a = hi
If(true){
let a= bye
Console.log(a) -> bye
}
Console.log(a) -> hi 이다
}
Var vs const vs let
Var는 더 이상 안씀
Const는 고정적인값
Let은 유동적인값
조건부랜더링
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 'test';
return (
<div>
{
1 +1 == 2
? '맞다'
: '틀려'
}
</div>
);
}
}
export default App;
문법은 이렇게 구성될수도있따.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 'test';
return (
<div>
{
name === 'test' && <div>테스트임</div>
}
</div>
);
}
}
export default App;
다른방식으로는
import React, { Component } from 'react';
class App extends Component {
render() {
const name = 1;
return (
<div>
{
(function(){
if(name === 1) return <div>1임</div>
if (name === 2) return <div>2임</div>
if (name === 3) return <div>3임</div>
})()
}
</div>
);
}
}
export default App;
(function(){
if(name === 1) return <div>1임</div>
if (name === 2) return <div>2임</div>
if (name === 3) return <div>3임</div>
})() ->. IFFE라고 부름
<div>
{
( ()=>{
if(name === 1) return <div>1임</div>
if (name === 2) return <div>2임</div>
if (name === 3) return <div>3임</div>
})()
}
</div>
이렇게도 표현가능함
스타일
클래스 대신에 클래스 네임 사용
import React, { Component } from 'react';
class App extends Component {
render() {
const style = {
backgroundColor : 'black', <-- 카멜케이스로작성 본래 html에선 background-color로 했음
padding : '16px',
color : 'white',
fontSize: '36px'
};
return (
<div style={style}>
test
</div>
);
}
}
export default App;
App.css 작성
.App {
background: black;
color: aqua;
font-size: 30px;
padding: 1rem;
font-weight: 600;
}
import React, { Component } from 'react';
import './App.css'
class App extends Component {
render() {
const style = {
backgroundColor : 'black',
padding : '16px',
color : 'white',
fontSize: '36px'
};
return (
<div className="App"> -> className으로 해줘야한다 물론 class도 되는데 표준이 아닌다.
test
</div>
);
}
}
랜더링안에서 주석
import React, { Component } from 'react';
import './App.css'
class App extends Component {
render() {
const style = {
backgroundColor : 'black',
padding : '16px',
color : 'white',
fontSize: '36px'
};
return (
<div className="App">
//하이
test
</div>
);
}
}
export default App;
그대로 //하이 가 나온다.
/* 멀티라인도 그렇다
주석은 다음과같이
import React, { Component } from 'react';
import './App.css'
class App extends Component {
render() {
const style = {
backgroundColor : 'black',
padding : '16px',
color : 'white',
fontSize: '36px'
};
return (
<div className="App">
{/* 멀티라인으로 하는데 괄호를 넣는다. */}
test
</div
//아니면 여기에다가? <-- div 끝에 넣는데 이런경우는 없을꺼같다.
>
);
}
}
export default App;