jsx의 기초 정리

1. JSX101
임광규
2020.ReactJS 1

2. ReactJS기본코드설명(App.js)
// 리액트를 불러와서 사용할수 있게 지원
import React from 'react';
// SVG(https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4)
// 스케일러블 벡터 그래픽스 파일
import logo from './logo.svg';
// CSS 로드
import './App.css';
// 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>
);
}
export default App;
2020.ReactJS 2

3. JSX변환
JSX는babel을통해서일반자바스크립트형태의코드로변화됩니다.
// JSX
const element = <div>React</div>
// 자바 스크립트
const element = React.createElement("div", null, "React");
JSX의뜻은standsforJavaScriptXML입니다.
2020.ReactJS 3

4. JSX장점
.보기쉽고익숙하다
.활용도가높다.
2020.ReactJS 4

5. render설명(index.js)
ReactDOM.render는컴포넌트를페이지에 랜더링 하는역할이며,
react-dom모듈을불러와사용함수의첫번째파라메터는랜더링할내용을 JSX 형태로작성하고,
두번째는JSX를랜더링할 document 내부요소를설정
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
2020.ReactJS 5

6. React.StrictMode
React.StrictMode는애플리케이션내의잠재적인문제를알아내기위한도구
개발모드에서만활성화되기때문에 프로덕션 & 빌드 에영향을끼치지않습니다.
2020.ReactJS 6

7. StrictMode 는아래와같은부분에서도움이됩니다.
안전하지않은생명주기를사용하는컴포넌트발견
레거시문자열ref사용에대한경고
권장되지않는findDOMNode사용에대한경고
예상치못한부작용검사
레거시contextAPI검사
2020.ReactJS 7

8. JSX문법-1
.감싸인요소
return에는꼭한개의DOM만return해야한다.
<></>,<React.Fragment></React.Fragment>사용
.자바스크립트표현
import React from 'react';
function App() {
const name = '리액트';
return (<>
<h1>{name} 안녕!</h1>
<h2>동작 테스트</h2>
</>);
}
export default App;
2020.ReactJS 8

9. JSX문법-2
.if문대신조건부연산자
import React from 'react';
function App() {
const name = '리액트';
return (<>
{name === '리액트'?
(<h1>리액트 입니다.</h1>):
(<h1>리액트가 아닙니다.</h1>)}
</>);
}
export default App;
2020.ReactJS 9

10. JSX문법-3
.AND연산자(&&)를이용한조건부랜더링
import React from 'react';
function App() {
const name = '리액트';
return (<>
{name === '리액트' && <h1>리액트 입니다.</h1>}
</>);
}
export default App;
2020.ReactJS 10

11. JSX문법-4
.undefined를랜더링하지않기(OR연산자(||)이용)
import React from 'react';
function App() {
const name = undefined;
return name || '값이 undefined 입니다.';
}
export default App;
2020.ReactJS 11

12. JSX문법-5
.인라인스타일링
import React from 'react';
function App() {
const name = '리액트';
return (<div style{{backgroundColor: 'black', color: 'aqua'}}>
{name}
</div>);
}
export default App;
2020.ReactJS 12

13. JSX문법-6
.class대신className
import React from 'react';
function App() {
return <div className="react">리액트 입니다.</div>;
}
export default App;
2020.ReactJS 13

14. JSX문법-7
.꼭닫아야하는태그
import React from 'react';
function App() {
return <div>
<input />
<br />
<input ></input>
</div>;
}
export default App;
2020.ReactJS 14

15. JSX문법-8
.주석
import React from 'react';
function App() {
return <div
className="react" // 시작 태그를 여러줄 작성하게 된다면 여기에 작성 할수 있음
>리액트 입니다.
{/* 주석은 이렇게 작성합니다. */}
</div>;
}
export default App;
2020.ReactJS 15

16. ESLint와Prettier
ESLint:문법검사도구
Prettier:코드스타일자동정리도구
2020.ReactJS 16

17. 뽀나스
DOM101:DOM기초
React101:React기초
2020.ReactJS 17