JSX
javascript XLM = 데이터 저장, 전달할 목적으로 만들어진 언어
하나의 파일에 자바스크립트와 html 동시에 작성가능
<?xml version="1.0" encoding="UTF-8"?>
<programming_languages>
<language>
<name>HTML</name>
<category>web</category>
<developer>W3C</developer>
<version status="working draft">5.1</version>
<priority rating="1">high</priority>
</language>
</programming_languages>
리액트 (src아래 app.js)
1. 리액트를 불러와서 사용할 수 있게 하는 코드
import React from 'react';
:프로젝트 생성과정에서 node_modules 디렉터리에 react 모듈이 설치, 따라서 import 구문을 이요해 리액트를 불러와서 사용
2. SVG 파일 및 SCC 파일 불러오기
import logo from './logo.svg';
import './App.css';
3. App이라는 컴포넌트 만들기
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
이때 function을 사용하여 컴포넌트를 만들었으므로 함수형 컴포넌트
: 프로젝트에서 컴포넌트를 렌더링할시, 함수에서 반환하고 있는 내용을 나타낸다.
> src 폴더 내부 index.js 확인
리액트가 화면을 출력하는 코드는 ReactDON.render 부분
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
여기서
JSX 사용규칙
1. 컴포넌트에 여러요소가 있을 시, 반드시 부모요소 하나로 감싸기
import React from 'react';
function App() {
return (
<div>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</div>
);
}
export default App;
<div>로 감쌌다.
이유는?
VirtualDOM에서 컴포넌트 변화를 감지해내기 위해서.
변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야함
만약 div 요소를 사용하고 싶지 않다면?
리액트v16이상부터 도입된 Fragment 기능 사용
import React, { Fragment } from 'react';
function App() {
return (
<Fragment>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</Fragment>
);
}
export default App;
상단 import구문에서 react 모듈이 들어있는 Fragment 컴포넌트를 추가로 불러오게 된다.
2. 자바스크립트 표현식 작성시 JSX 내부에서 코드를 {}로 감싸기
import React from 'react';
function App() {
const name = "리액트";
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;
3. JSX 내부의 자바스크립트 표현식에서, if문을 사용할 수 없다.
BUT 조건에 따라 다른 내용을 렌더링 해야할 경우, JSX밖에서 if문을 사용하여 사전에 값을 설정하거나
{}안에 조건부 연산자 사용
(조건부 연산자 = 삼항 연산자)
import React from 'react';
function App() {
const name = "리액트";
return (
<div>
{name === "리액트" ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</div>
);
}
export default App;
import React from 'react';
function App() {
const name = "리액트";
return (
<div>
{name === "뤼액트" ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</div>
);
}
export default App;
4. 특정조건을 만족할 때 내용 보여주기
(만족하지 않는 경우 아무것도 렌더링 X)
이때, 조건부 연산자를 통해 구현할 수 있다.
import React from 'react';
function App() {
const name = "뤼액트";
return <div>{name === "리액트" ? <h1>리액트입니다.</h1> : null}</div>;
}
export default App;
더 짧게 (&& 연산자 사용)
import React from 'react';
function App() {
const name = "뤼액트";
return <div>{name === "리액트" && <h1>리액트입니다.</h1>}</div>;
}
export default App;
&&연산자로 조건부 렌더링을 할 수 있는 이유 ?
리액트에서는 false를 렌더링할 경우, null과 마찬가지로 아무것도 나타내지 않기 때문이다.
주의!
falsy한 값인 0은 예외적으로 화면에 나타난다.
const number = 0;
return number && <div>내용</div>
5. 괄호() 사용법
주로 JSX를 여러 줄로 작성할 때는 괄호로 감싸고, 한줄로 표현할 수 있는 경우 감싸지 않는다. (필수가 아님)
(<div>Hello World</div>)
5 . 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황이 없어야 한다.
// 오류 일으키는 코드
import React from 'react';
import './App.CSS';
function App() {
const name = undefined;
return name;
}
export default App;
그렇다면..?
어떤 값이 undefined일 수 있는 경우에는, OR (||) 연산자를 사용하여
해당값이 undefined일 때 사용할 값을 지정하여 오류를 방지한다.
import React from 'react';
import './App.CSS';
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App;
BUT!
JSX내부에서 undefined를 렌더링하는 것은 가능
import React from 'react';
import './App.CSS';
function App() {
const name = undefined;
return <div>{name}</div>;
}
export default App;
undefined일 때 보여주고 싶은 문구가 있다면?
import React from 'react';
import './App.CSS';
function App() {
const name = undefined;
return <div>{name || '리액트'}</div>;
}
export default App;
6. 리액트에서, DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌, "객체 형태"로 넣어준다
카멜표기법 사용하기
import React from 'react';
function App() {
const name = "리액트";
const style = {
backgroundColor: "black",
color: "aqua",
fontSize: "48px",
fontWeight: "bold",
padding: 16
};
return <div style={style}>{name}</div>;
}
export default App;
다음과 같다.
import React from 'react';
function App() {
const name = "리액트";
return (
<div
style={{
backgroundColor: "black",
color: "aqua",
fontSize: "48px",
fontWeight: "bold",
padding: 16
}}
>
{name}
</div>
);
}
export default App;
7. 일반 HTML에서 CSS 클래스 사용시 class라는 속성을 주는 것과 달리,
JSX에서는 "className" 으로 설정한다
// src / App.css
.react {
background: aqua;
color: black;
font-size: 48px;
font-weight: bold;
padding: 16px;
}
App.js
import React from 'react';
import './App.css';
function App() {
const name = "리액트";
return <div className="react">{name}</div>
}
export default App;
8. JSX에서는 <br>, <input>처럼 코드를 닫지 않고 작성시 오류가 생긴다.
</> 꼭 닫기!
import React from 'react';
import './App.css';
function App() {
const name = "리액트";
return (
<>
<div className="react">{name}</div>
<input></input>
</>
);
}
export default App;
이렇게 작성하거나,
import React from 'react';
import './App.css';
function App() {
const name = "리액트";
return (
<>
<div className="react">{name}</div>
<input />
</>
);
}
export default App;
이렇게 닫는 것을 self-closing 태그라 하며
태그를 선언하면서 동시에 닫을 수 있는 태그이다.
9. JSX 안에서 주석
import React from 'react';
import './App.css';
function App() {
const name = "리액트";
return (
<>
{/* 주석은 이렇게 시작합니다!! */}
<div
className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수도 있습니다.
>
{name}
</div>
// 하지만 이런 주석이나
/* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
<input />
</>
);
}
export default App;
실습하기
변수선언
import React from 'react';
function App() {
const name = '초바비';
const animal = '고양이';
return (
<div>
<h2>
제 반려동물의 이름은 {name} 입니다! <br />
{name}는 {animal} 입니다.
</h2>
</div>
);
}
export default App;
삼항연산자
import React from 'react';
function App() {
let a = 3;
let b = 5;
const value = a + b;
return (
<div>{value === 8 ? <h1> 정답입니다! </h1> : <h2> 오답입니다! </h2>}</div>
);
}
export default App;
&& 연산자
import React from 'react';
function App() {
let a = 7;
let b = 5;
// const value = a + b;
return <div>{a > b && <h1> a가 b보다 큽니다 </h1>}</div>;
}
export default App;
컬러 및 정렬하기
//css
//추가
.test {
text-align: center;
color: brown;
background-color: rgb(255, 222, 183);
/* font-weight: bold; */
font-size: 50px;
}
.input {
align-items: center;
text-align: center;
margin: 20px;
}
//app.js
import React, { Fragment } from 'react';
import './App.css';
function App() {
const title = 'Hello, SESAC!';
return (
<Fragment>
<div className="test">{title}</div>
<br />
<div style={{ textAlign: 'center' }}>
아이디:<input className="input"></input>
<br />
비밀번호:<input className="input"></input>
</div>
</Fragment>
);
}
export default App;
app.css 에 클래스 줘서 무지개 만들기, float 쓰기
//app.css
.red {
background-color: red;
width: 100px;
height: 100px;
float: left;
}
.orange {
background-color: orange;
width: 100px;
height: 150px;
float: left;
}
.yellow {
background-color: yellow;
width: 100px;
height: 200px;
float: left;
}
.green {
background-color: green;
width: 100px;
height: 250px;
float: left;
}
.blue {
background-color: blue;
width: 100px;
height: 300px;
float: left;
}
.navy {
background-color: navy;
width: 100px;
height: 350px;
float: left;
}
.purple {
background-color: purple;
width: 100px;
height: 400px;
float: left;
}
app.js
import React, { Fragment } from 'react';
import './App.css';
function App() {
return (
<Fragment>
<div className="red"></div>
<div className="orange"></div>
<div className="yellow"></div>
<div className="green"></div>
<div className="blue"></div>
<div className="navy"></div>
<div className="purple"></div>
</Fragment>
);
}
export default App;
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL🚴♀️] CodingON' 카테고리의 다른 글
[React] Props (0) | 2023.01.10 |
---|---|
[React] 컴포넌트 (0) | 2023.01.10 |
[React] 컴포넌트 사용하기, 기본세팅하기 (0) | 2023.01.10 |
[react] TypeScript, useState (0) | 2023.01.05 |
[REACT, JSX] 리액트 기초 (0) | 2023.01.03 |