시간이 생겨서 리액트 다루는 기술이란 책을 한 바퀴 돌리기 위해서 정리하게 되었습니다.
OS : Mac
IDE : VSCODE
JSX
import React from "react";npm을 통해 설치한 라이브러리를 사용하는 구문입니다.
보통 npm을 통해 react 라이브러리를 받지만, create-react-app으로 프로젝트를 구성했고, react 애플리케이션을 개발하기 위한 스크립트들이 숨어있을 거라고 생각합니다.
이렇게 모듈을 불러오는 기능은 브라우저에는 없는 기능입니다.
Node.js에서 지원하는 기능입니다. 정확히는 CommonJS를 지원하여 require 구문을 사용하지만, babel을 통해 import구문이 require로 바뀝니다. babel은 webpack이란 번들러에서 사용할 수 있습니다.
webpack은 위와같이 import등으로 생긴 의존관계까지 챙겨서 하나 또는 여러개의 js파일로 묶는 프로그램입니다. 그 과정에서 최적화도 같이 진행합니다. 다른 대표적인 번들러는 Parcel, browserify 도구들이 있습니다.
- 2017년부터는 브라우저에서도 import 구문이 사용할 수 있게 되었다네요.
import logo from "./logo.svg";
import "./App.css";웹팩은 js파일들은 읽을 수 있는데 프로젝트 구성할때 css, sass, less, svg 등 파일을 사용되기 때문에 웹팩이 이해해야되는데 이런 기능을 담당하는게 웹팩의 loader입니다. svg파일을 읽기 위해 file-loader를 설치해서 웹팩 설정에 추가해줍니다.
css-loader로 CSS 파일을 읽을 수 있게 되고, babel-loader를 통해 es5가 아닌 최신 자바스크립트 문법을 사용할 수 있게 됩니다.
App이라는 컴포넌트를 만든 코드입니다. 함수형 컴포넌트라고 합니다.
이런 코드는 HTML도 아니고, js도 아닌 이런 코드를 JSX라고 합니다.
XML과 같이 데이터를 표현하기 위해 만든 틀이고, babel을 통해 javascript 코드로 변환된다네요.
javascript로 html DOM를 생성할 수 있잖아요. 이런식으로요
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;JSX 문법
리액트는 아래와 같이 여러요소가 있으면 반드시 부모 요소 하나로 감싸야합니다.
이런거 굳이 몰라도 ESLint를 설치하시면 에러내주고 어떻게 해야되는지 설명해줍니다.
또는 에러메시지를 구글링해서 올바른 문법을 사용할 수 있습니다.
import React from "react";
function App() {
return (
<h1>hello react</h1>
<h2>hello react</h2>
);
}
export default App;이렇게 하실수 있습니다. Fragment 를 쓰셔도 됩니다.
import React from "react";
function App() {
return (
<>
<h1>hello react</h1>
<h2>hello react</h2>
</>
);
}
export default App;자바스크립트 표현
import React from "react";
function App() {
const name = 'react';
return (
<>
<h1>hello {name}</h1>
<h2>hello {name}</h2>
</>
);
}
export default App;if 문 대신 조건부 연산자
{ } 안에 삼항연산자를 넣어서 조건부로
import React from "react";
function App() {
const name = 'react';
return (
<>
{ name === 'react' ? (
<h1>yes {name}</h1>
) : (
<h2>not {name}</h2>
)}
</>
);
}
export default App;AND 연산자(\&\&)를 사용한 조건부 렌더링
name 이 'react' 가 아니면 화면에 아무것도 안나옵니다.
import React from "react";
function App() {
const name = 'react';
return (
<>
{ name === 'react' ? (
<h1>yes {name}</h1>
) : null
}
</>
);
}
export default App;더 좋은 코드
import React from "react";
function App() {
const name = 'react';
return (
<>
{ name === 'react' && <h1>yes {name}</h1> }
</>
);
}
export default App;undefined를 렌더링하지 않기
리액트 컴포넌트에선는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 됩니다. 에러가 발생하니까. 왜냐하면 앱이 죽어요.
사용자가 브라우저에서 앱을 못보고 에러메시지를 보게 됩니다..
물론 그런일이 없게끔 개발해야됩니다.
import React from "react";
function App() {
const name = undefined;
return name || '값이 undefined입니다.';
}
export default App;name이 undefined일 때 보여 주고 싶은 문구가 있다면 다음과 같이 코드를 작성하면 됩니다.
import React from "react";
function App() {
const name = undefined;
return <>{name || '리액트'}</>;
}
export default App;인라인 스타일링
import React from "react";
function App() {
const name = "react";
return <div style={{
//background-color는 backgroundColor와 같이 -사라지고 camel 표기법으로 작성됩니다.
backgroundColor: "black",
color: "aqua",
fontSize: "48px"
}}>{name}</div>;
}
export default App;App.css
.mystyle {
/* background-color는 backgroundColor와 같이 -사라지고 camel 표기법으로 작성됩니다. */
background-color: black;
color: aqua;
font-size: 48px;
}
import React from "react";
import "./App.css";
function App() {
const name = "리액트";
return <div className="mystyle">{name}</div>;
}
export default App;ESLint 와 Prettier 적용하기
ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 도와주는 도구입니다.
둘다 협업할때 코드스타일을 동일하게 하기 위한 도구들입니다.
linterror는 안 지켜도되고 error를 끌 수도 있습니다. ESLint도 코드 스타일과 관련있습니다.
ESLint는 package.json에 eslintConfig속성에 넣을 수도 있고, .eslintrc를 통해 설정할 수 있습니다.
자세한건 여기서 보시면 됩니다.
.prettierrc 에 코드스타일을 넣어주면 됩니다.
저장할 때 자동으로 코드 정리하기
cmd + shift + p 로 명령파레트 키고 settings.json에 속성을 넣어줍니다. "editor.formatOnSave": true 다음과 같이 속성을 넣어줍니다.
