soowanlog
React 본문
- React란?
Javascript를 기반으로 하는 오로지 view만을 담당하는 Library입니다.
그만큼 내장되어 있는 기능이 부족해 3rd-party Library(react-router-dom, redux)를 함께 사용합니다.
React와 같은 프론트엔트 Library나 Framework를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점입니다. React는 UI를 자동으로 업데이트하는 과정에서 Virtual DOM을 통해 최적화를 구현합니다.
※ Virtual DOM
React가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 기술임.
DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주 하게 되고, 그만큼 PC 자원을 많이 소모하게 되는 문제를 해결하기 위한 기술임.
- React의 등장배경
- 1세대 프론트엔드 기술 :
기본적인 HTML, CSS, Javascript로 DOM을 조작하고 이벤트를 발생시켰습니다.
- 2세대 프론트엔드 기술 :
웹이 발전하여 DOM의 조작이 빈번하게 발생함에 따라 jQuery 기술이 등장하게 됐습니다.
결국 jQuery는 DOM을 조작한다는 행위에서 벗어나지 못해서 점점 복잡해지는 환경에서 한계에 도달했습니다.
- 3세대 프론트엔드 기술 :
jQuery 한계 이후, 패러다임을 완전히 바꾸는 새로운 프레임워크를 요구함에 따라 Angular, Vue와 같은 Framework와 React 같은 Library가 등장하게 됐습니다.
- JSX란?
JSX(Javascript Syntax Extension)는 Javascript를 확장한 문법으로 Javascript와 HTML을 합쳐놓은 듯한 형태로 가독성이 높고 작성하기가 쉽습니다.
그러나 JSX로 작성한 코드는 Javascript가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 합니다.
// JSX
<div>Hello World</div>
// Babel
React.createElement('div', null, "Hello World")JSX는 HTML tag를 그대로 사용하기 때문에 익숙하며, HTML 마크업과 Javascript 로직을 같이 구현할 수 있습니다.
Javascript 문법을 이용해서 HTML을 생성할 수 있으며 기존의 DOM + Event 방식보다 훨씬 간편하게 UI를 구성할 수 있습니다.
- JSX 문법
- 반드시 부모 요소 하나가 감싸는 형태
// 에러 케이스
function App() {
return (
<div>Hello</div>
<div>World</div>
);
}// 정상 코드1
function App() {
return (
<div>
<div>Hello</div>
<div>World</div>
</div>
);
}
// 정상 코드2
function App() {
return (
<>
<div>Hello</div>
<div>World</div>
</>
);
}
- Javascript 표현식
// 유효한 모든 Javascript 표현식을 넣을 수 있음
function App() {
const text = "World";
return (
<>
<div>Hello</div>
<div>{text}</div>
</>
);
}
- camelCase 프로퍼티 명명 규칙 사용
function App() {
const style = {
fontSize: "2rem",
border: "1px solid black",
borderRadius: "5px"
}
return (
<div style={style}>Hello World</div>
);
}참 고 자 료