💻 1. JSX란?
JSX는 Js 확장 문법이며 XML과 매우 유사하게 생겼다.
//JSX
functio App() {
return (
<div>
Hello <b>react</b>
</div>
);
}
//JS
function App() {
return React.createElement("div",null,"Hello ",
React.createElement("b",null,"react"));
}이처럼 React.createElement 함수를 사용하면 귀찮고 불편하기에 JDX를 사용하여 편하게 UI를 렌더링 하고자 한다.
🔥 2. JSX 장점
- JSX를 사용하는것이 JS로 사용한 코드보다 가독성이 높고 작성하기 쉽다.
- JSX에서는 div,span 같은 HTML 태그를 사용할 수 있을 뿐만아니라 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.
import ReactDOM from 'reaxt-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);ReactDOM.render은 무엇인가?
코드를 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.
React.StrictMode는 무엇인가?
리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못학 하는 기능이다. 이는 사라지게 될 옛날 기능을 사용하였을 때 경고를 출력한다.
⌨ 3. JSX 문법
3.1 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야한다.
function App() {
return (
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
)
}
export default App;위와 같은 코드는 정상적으로 잘 작동하지 않는다.
function App() {
return (
<div>
<h1> 리액트 안녕!</h1>
<h2> 잘 작동하니?</h2>
</div>
);
}
export default App;이렇게 하나의 요소로 감싸야하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
! 그러나! 여기서 꼭 div 요소를 사용하지 않아도 된다.
// v16 이상부터 도입된 Fragment라는 기능을 사용해도 된다.
import {Fragment} from 'react';
// react 모듈에 있는 Fragment컴포넌트도 추가로 불러온다.
function App() {
return (
<Fragment>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</Fragment>
);
}
export default App;이런식으로도 표현이 가능하다.
function App() {
return (
<>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
);
}
export default App;3.2 JS표현
JS표현식을 작성하려면 JSX내부에 코드를 {}로 감싸면 된다.
function App() {
const name = '리액트';
return (
<>
<h1> {name} 안녕! </h1> //이런 식으로
<h2> 잘 작동하니? </h2>
</>
);
}
export default App;3.3 IF문 대신 조건부 연산자
JSX내부에서는 If 문을 사요알 수 없다. 그러나, 조건에 따라 다른 내용을 렌더링해야 할 때는
1. JSX 밖에서 if 문을 사용하여 사전에 값을 설정
2. {} 안에 조건부 연산자를 사용하면 된다.
조건부 연산자의 다른 이름 = 삼항 연산자
function App() {
cosnt name = 'react';
return (
<div>
{name === '리액트' ? (
<h1> 리액트입니다.</h1>
) : ( <h2> 리액트가 아닙니다. </h2>
) }
</div>
);
}
export default App; 3.4 AND 연산자(&&)를 사용한 조건부 렌더링
function App() {
const name = '뤼액트';
return <div> {name === '리액트' ? <h1>리액트입니다.</h1> : null} </div>;
}
export default App;null을 렌더링하면 아무것도 보여주지 않는다.
그러나, 이보다 짧은 코드로 작업할 수 있다.
function App() {
const name = '뤼왝트';
return <div> {name === '리액트' && <h1>리액트 입니다.</h1>} </div>;
}
export default App;&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 랜더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
3.5 undefined를 렌더링하지 않기
import './App.css';
function App() {
const name = undefined;
return name;
}
export default App;↑이런 코드는 오류가 난다.
어떤 값이 undefined 일수도 있다면. or(||) 연산자를 사용하면 해당 값이 undefined 일때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.
import './App.css';
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App;그러나 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.
import './App.css';
function App() {
const name = 'undefined';
return <div>{name}</div>;
}
export default App;값이 undefined 일때 보여주고 싶은 문구가 있다면 이렇게 코드를 작성하면 된다.
import './App.css';
function App() {
const name = undefined;
return <div>{name || '리액트'} </div>;
}
export default App;3.6 인라인 스타일링
리액트에서 DOM 요소에 스타일을 적용할 때 문자열 형태가 아닌 객체 형태로 넣어주어야한다.
Ex. background-color => backgroundColor
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;이 코드에서는 style 객체를 미리 선언하고 div의 style 값으로 지정해주었다. 미리 선언하지 않고 바로 style 값을 지정하고싶다면 이렇게 해야한다.
function App() {
const name = '리액트';
return (
<div
style = {{
backgroundColor : 'black',
color : 'aqua',
fonstSize : '48px',
fontWeight : 'bold',
padding : 16
}}
>
{name}
</div>
);
}
export default App;3.7 class 대신 className
JSX에서는 class 가 아닌 className으로 설정해주어야한다.
//App.css
.react{
background : aqua;
color: black;
font-size : 48px;
font-weight : bold;
padding : 16px;
}
//App.js
import './App.css';
function App() {
const name = '리액트';
return <div **className** = "react">{name}</div>;
}
export default App;3.8 주석
JSX안에서 주석을 작성하는 방법은 JS에서 주석을 작성할 떄와 다르다.
import './App.css';
function App() {
const name = '리액트';
return (
<>
{ /*주석은 이렇게 작성하는것임. */}
<div
className = "react"
//시작 태그를 여러줄로 작성하게 된다면 여기에 주석을 작성할 수 있다.
>
{name}
</div>
//이런주석이나
/*이런 주석은 페이지에 그대로 나타난다.*/
</>
);
}
export default App;JSX 내부에서 주석을 작성할 때는 예시처럼 {/../} 와 같이 작성해야한다.
그리고 시작 태그를 여러줄로 작성할 때 내부에서 // 과 같은 형태의 주석도 작성할 수 있다.
🐱🏍4. ESLint 와 Prettier 적용하기
- ESLint : 문법 검사 도구
- Prettier : 코드 스타일 자동 정리 도구
VS Code에서 F1을 누르고 format을 입력한 후 Enter를 누르면 코드가 잘 정리된다. (이때 Beautify 포맷 도구를 설치했다면 충돌이 발생할 수 도 있다.)
