React. 001
리액트의 개념 / JSX 기본 문법
Virtual dom?
Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.
React는 virtual dom을 제공한다.
데이터에 변화가 있을 시, mutation 없이 새로운 뷰를 만들어내는 방식.
데이터가 변화가 생기면 자바스크립트로 이루어진 가상의 dom에 렌더링 한다.
이를 기존의 뷰와 비교한 뒤에 실질적인 변화가 이루어진 곳에만 업데이트 한다.
-> 화면 전체를 업데이트할 필요 없이 변화가 생긴 부분에만 업데이트하기 때문에 보다 효율적
Webpack이란?
웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.
코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개의 파일로 결과물을 만들어낸다.
번들링 작업을 하게 될 때에는 특정 확장자마다 처리작업을 하도록 준비한다.
웹 프로젝트를 만들 때 전체적으로 사이트를 관리해주는 도구.
Babel이란?
Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 컴파일러입니다.
자바스크립트는 계속하여 새로운 문법을 도입한다.
nodeJS와 브라우저 자바스크립트 엔진 등이 그 모든 문법을 지원하기는 힘들다.
따라서 이전 자바스크립트로 변환하는 작업이 필요한데, 그 작업을 수행하는 도구.
JSX 문법 규칙
1. 태그를 열었으면 꼭 닫아야 한다.
HTML에서는 태그를 꼭 닫지 않아도 오류가 발생하지 않지만 JSX에선 태그를 안 닫을 시 오류가 발생한다.
닫는 태그가 필요없는 경우, (ex:<br>,<input>) self-closing 태그를 사용하도록 한다.
self-closing이란? 한번 연 태그를 그 자리에서 바로 닫는 방식 (<input/>)
2. 두개 이상의 엘리먼트는 하나의 엘리먼트로 감싸져 있어야 한다.
굳이 두개를 렌더링 하기 위해 추가적인 불필요한 div를 만들어야 하는가?
->이를 개선하기 위한 방법으로 리액트 v16.2에서 frament 기능을 도입하였다.
Fragment를 import시켜 복수의 div를 <Fragement>태그로 감싸준다.
ex)
return(
<Fragment>
<div>Hi</div>
<div>React</div>
</Fragment>
);
3. JSX 내부에 자바스크립트 값을 사용할 땐 {} 중괄호를 사용하도록 한다.
ex)
const name=‘react’;
return (
<div>
hello, {name}!;
</div>
);
let과 var의 차이?
var은 scope가 함수를 기준으로 한다.
let과 const는 scope가 블록 단위로 설정된다.
var : es6부턴 더이상 사용하지 않는다. (사용을 지양하도록)
const : 한번 선언 한 후 고정적인 값을 가진다.
let : 유동적인 값을 가진다.
4. JSX에서 if문을 바로 사용할 순 없다. 삼항 연성자를 사용하도록 한다.
ex)
<div>
{
1+1===2
? ‘맞다’
: ‘틀리다’
}
</div>
조건값을 주고 일치할 때에만 작동하도록 한다면?
ex)
<div>
{name === ‘react’ && <div>예~</div> }
</div>
조건이 여러개일 경우 JSX의 바깥에서 하는 것이 일반적이다.
JSX 내부에서 할 경우 다음의 방법을 사용한다.
ex)
<div>
{
(function(){
if (value ===1) return <div>1이다</div>
if (value ===2) return <div>2이다</div>
if (value ===3) return <div>3이다</div>
return <div>없다</div>
})() <-함수 선언 후 바로 실행
}
</div>
5. CSS 사용할 때는?
스타일을 적용할 때에는 객체 형식으로 넣어준다.
이 때 스타일의 속성명은 Camel case 방식으로 적도록 한다.
색상, 문자, 숫자 입력 등은 꼭 문자열 형태로 입력하도록 한다.
ex)
const style = {
backGroundColor : ‘black’,
padding : ’16px’,
fontSize : ‘36px’
};
return (
<div style={style}>Hi</div>
);
6. 태그에 클래스를 추가할 때 속성명을 class 대신 className으로 작성한다.
7. 주석 사용 방법
{/*멀티라인 주석방식을 대괄호로 감싼다.*/}
<h1
something=“asasddf” //컴포넌트 내부에 주석을 남기고 싶다면 이렇게
>
