2.1 코드 이해하기
import
모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능이다.
Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.
이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다. 여러가지 종류가 있지만 리액트에서는 웹팩(Webpack)을 사용하는 추세이다. 번들러를 사용하면 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다. 또는 최적화 과정에서 여러 개의 파일로 분리되기도 한다.
2.2 JSX란?
자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생김.
이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
// JSX
function App() {
return (
<div>
Hello <b>react</b>
</div>
)
}
// after bundling
function App() {
return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}2.3 JSX의 장점
- 보기 쉽고 익숙함
- 활용도가 높음
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);-
ReactDOM.render
컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다. 이 함수의 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고, 두 번째 파라키터에는 해당 JSX를 렌더링 할 document 내부 요소를 설정한다. 기본적으로는 id가 root인 요소 안에 렌더링을 하도록 설정되어 있다. -
React.StrictMode
리액트 프로젝트 내에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능이다. 이를 사용하면 문자열 ref, componentWillMount 등 나중에는 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력한다.
2.4 JSX 문법
-
컴포넌트는 가장 바깥에서는 하나의 태그로 감싸져야 함
이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
여기서 꼭div요소를 사용하고 싶지 않다면 v16 이상부터 도입된<Fragment>기능을 사용하면 된다.
<Fragment>는<>와 같이 빈 태그로 사용할 수도 있다. -
자바스크립트 표현은
{}안에 넣어서 함 -
If문 대신 조건부 연산자(삼항연산자)
<div>
{name === '리액트' ? <h1>리액트입니다.</h1> : <h1>리액트가 아닙니다.</h1>}
</div>- AND 연산자(&&)를 사용한 조건부 렌더링
// name이 '리액트'가 아닐 때에는 아무것도 나타나지 않는다.
// {name === '리액트' ? <h1>리액트입니다.</h1> : null} 과 같다.
function App() {
const name = '리액트아님';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>
}
export default App;다만, falsy한 값인 0은 예외적으로 화면에 나타나기에 주의해야 한다.
// 이 코드는 화면에 0이 보여진다.
const number = 0;
return number && <div>내용</div>;- undefined를 렌더링하지 않기
// 다음과 같이 undefined인 값을 렌더링하면 오류가 난다.
function App() {
const name = undefined;
return name;
}
// 그러나 JSX 내부에서 undefined를 렌더링하는 건 괜찮다.
function App() {
const name = undefined;
return <div>{name}</div>;
}
// 하지만 위의 코드도 좋은 코드는 아니고 값이 undefined일 때 예외처리를 해 주는 것이 좋다.
function App() {
const name = undefined;
return name || '값이 undefined입니다.';- 인라인 스타일링은 CamelCase로 작성
// 스타일 객체를 미리 선언하고 div의 style 값으로 지정
function App() {
const name = '리액트';
const style = {
backgroundColor: 'black',
color: 'aqua',
fontSize: '48px'
};
return <div style={style}>{name}</div>;
}
// 스타일을 바로 정의
function App() {
const name = '리액트';
return (
<div
style={{
backgroundColor: 'black',
color: 'aqua',
fontSize: '48px'
}}
>
</div>
);
}- class 대신 className
- 태그는 꼭 닫아야 함
<br></br> => <br />
<input></input> => <input />- 주석
// 한 줄 주석은 이렇게
{/* 여러줄의 주석은 이렇게 */}2.5 ESLint와 Prettier 적용하기
ESLint는 문법 검사 도구이고 Prettier는 코드 스타일 자동 정리 도구이다.
>format 이라고 입력한 후 엔터를 누르면 스타일이 정리된다.
물론 설정(Preference)에 들어가서 format on Save로 저장을 누를 때마다 자동으로 포맷팅 되게 하는 것이 더욱 편리할 것이다.
