2.1 코드 이해하기
create-react-app은 번들러(웹팩, Parcel browserify) 중 웹팩을 사용하는 프로젝트를 생성함.
이로 인해,
- import 구문을 사용해서 모듈 통합이 가능함.
- 최적화 과정에서 파일 분리가 가능함.
- 로더를 통해서 svg, css, 웹폰트, 미디어 파일 등을 불러와서 사용할 수 있음.
- 최신 자바스크립트 파일을 ES5문법으로 변환해줌.
2.2 JSX란?
자바스크립트의 확장 문법이며 XML과 유사. 번들링 과정에서 일반 자바스크립트 형태의 코드로 변환됨.
1.번들링 전
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}
2.번들링 후
function App() {
return React.createElement("div", null, "Hello", React.createElement("b", null, "react")));
}
2.3 JSX의 장점
- 보기 쉽고 익숙하다. (html과 유사)
- 활용도가 높다. (html 태그뿐만 아니라, 새로 만드는 컴포넌트도 JSX안에서 작성 가능)
2.4 JSX 문법
2.4.1 감싸인 요소
- 부모 요소 하나로 감싸야함. (Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하는 컴포넌트 내부는 하나의 DOM트리 구조로 이 류어 져야 한다는 규칙 존재)
1.잘못된 예
import React from 'react';
function App() {
return (
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
)
}
export default App;
2.올바른 예
import React from 'react';
function App() {
return (
<div>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</div>
)
}
export default App;
3.v16이상 Fragment 사용 가능
import React, {Fragment} from 'react';
function App() {
return (
<Fragment>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</Fragment>
)
}
export default App;
4.Fragment를 아래와 같은 형태로도 사용 가능
import React, {Fragment} from 'react';
function App() {
return (
<>
<h1>리액트 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
)
}
export default App;
2.4.2 자바스크립트 표현
JSX 내부에서 자바스크립트 표현식을 사용하려면 {}를 사용
import React from 'react';
function App() {
const name = '리액트';
return (
<>
<h1>{name} 안녕!</h1>
<h2>잘 작동하니?</h2>
</>
)
}
export default App;
2.4.3 If문 대신 조건부 연산자
JSX 내부의 자바스크립트 표현식에서 if문 사용 불가. 때문에 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, { }안에 조건부 연산자(삼항 연산자)를 사용
import React, {Fragment} from 'react';
function App() {
const name = '리액트';
return (
<div>
{name === '리액트' ? (
<h1>리액트 안녕!</h1>
) : (
<h2>잘 작동하니?</h2>
)}
</div>
)
}
export default App;
2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때만 내용을 보여줄 때 사용.
1.null을 렌더링
import React from 'react';
function App() {
const name = '뤼액트';
return (
<div>{name === '리액트' ? <h1>리액트 입니다.</h1> : null}</div>
)
}
export default App;
2.false를 렌더링 하는 경우 null과 마찬가지로 취급(0은 예외적으로 화면에 나타남)
import React from 'react';
function App() {
const name = '뤼액트';
return (
<div>{name === '리액트' && <h1>리액트 입니다.</h1>}</div>
)
}
export default App;
2.4.5 undefined를 렌더링하지 않기
1.함수에서 undefine만 반환하여 랜더링할 수 없음
import React from 'react';
function App() {
const name = undefiend;
return name;
}
export default App;
2.OR연산자를 통한 해결
import React from 'react';
function App() {
const name = undefiend;
return name || '값이 undefined 입니다.';
}
export default App;
3.JSX내부에서 undefined 랜더링 가능
import React from 'react';
function App() {
const name = undefiend;
return <div>{name}</div>;
}
export default App;
2.4.6 인라인 스타일링
- DOM요소에 스타일을 적용할 때 객체 형태로 넣어 주어야 함. (문자열 x)
- 카멜표기법으로 작성해야 함 (background-color ==> backgroundColor)
1.객체를 선언하여 전달
import React from 'react';
function App() {
const name = '리액트';
const style = {
backgroundColor: 'black', //background-color => backgroundColor
color: 'aqua',
fontSize: '48px', //font-size => fontSize
fontWeight: 'bold', //font-weight =>fontWeight
padding: 16
}
return (
<div style={style}>{name}</div>
)
}
export default App;
2.inline 형태로 전달 시
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;
2.4.7 class대신 className
JSX에서는 class가 아닌 className으로 class 지정.
(v16이상부터는 class로 지정하면 className으로 변환시켜 주고 콘솔에 경고 띄움._
import React from 'react';
function App() {
const name = '리액트';
return (
<div className="react">{name}</div>
)
}
export default App;
2.4.8 꼭 닫아야 하는 태그
태그는 꼭 닫아야 함
ex> <input> (x), <input></input>, <input/> (o)
2.4.9 주석
JSX 내부에서 주석을 작성할 때는 {/* !@#!@#!# */}와 같은 형식으로 작성
import React, {Fragment} from 'react';
function App() {
const name = '리액트';
return (
<>
{/*주석은 이렇게 작성합니다*/}
<div
className="react" //시작 태그를 여러 줄로 작성하게 된다면 여기에 가능.
>
{name}
</div>
// 하지만 이런 주석이나
/*이런 주석은 페이지에 그대로 나타나게 됨*/
</>
)
}
export default App;
2.5 ESLint와 Prettier 적용하기
- ESLint : 문법 검사도구, 잘못된 문법 시 경고 메시지 화면에 보임. (VS Code : 보기 > 문제 (상단 메뉴))
- Prettier : 코드 스타일 자동 정리 도구 (VS Code : f1 -> format document), 루트 디렉터리에 .prettierrc를 작성해서 커스터마이징
- 저장할 때 코드 자동 정리 : Code(파일) > 기본 설정 > 설정 (상단메뉴) 에서 텍스트 박스에 format on save 검색하여 체크.
2.6 정리
JSX는 HTML과 비슷하지만 완전히 똑같지 않음. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도와 문법이 조금씩 차이가 남.