bundler : 번들(bundle)은 묶는 다는 뜻입니다. 즉, 파일을 묶듯이 연결하는 것이죠.
대표적인 번들러로 webpack, parcel, browserify 라는 도구들이 있다.(리액트에선 주로 webpack을 사용)
src/index.js를 시작으로 필요한 파일을 다 불러와서 번들링.
웹팩을 사용하면 SVG, CSS파일도 불러와서 사용가능 -> webpack-loader (file-loader, css-loader ...)
렌더링?
자바스크립트의 확장 문법이며 xml과 매우 비슷하게 생겼습니다.(결코, html 코드가 아니며 문자열 템플릿도 아닙니다.) 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스립트 형태의 코드로 변환됩니다.
function App() {
return(
<div>
Hello<b>react</b>
</div>
);
}위는 JSX 코드이며, 이렇게 작성된 코드를 렌더링 하게되면
function App() {
return React.createElement("div",null, "Hello", React.creatElement("b", null, "react"));
}벌써 막 짜증이 납니다. JSX을 사용하면 매우 편하게 UI를 렌더링 할 수 있답니다.
// JSX는 자바스크립트 문법이 아닙니다!
감싸인 요소
function App() {
return (
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
);
}
export default App;
이런 형태의 코드는 제대로 작동하지 않습니다.
function App() {
return (
<div>
<h1>리액트 안녕</h1>
<h2>잘 작동하니?</h2>
</div>
);
}
export default App;
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.
why?
-> Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
const, let
const는 ES6문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드 입니다. let은 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드입니다.
ES6 이전에는 값을 담는 데 var 키워드를 사용했는데요, var 키워드는 scope가 함수 단위 입니다.
function MyFunction() {
var a = 'hello';
if (true) {
var a = 'bye';
console.log(a); // bye
}
console.log(a); // bye
}
MyFunction();function MyFunction() {
let a = 1;
if (true) {
let a = 2;
console.log(a); // 2
}
console.log(a); // 1
}
MyFunction();let과 const는 scope가 함수 단위가 아닌 블록 단위이므로, if문 내부에서 선언한 a 값은 if문 밖의 a 값을 변경하지 않습니다.
let과 const를 사용할 때 같은 블록 내부에서 중복 선언이 불가능하다는 점에 주의하세요.
let a=1;
let a=2; // 오류const는 한번 선언하면 재설정할 수 없습니다.
const b=1;
b=2; // 에러