Node.js란 커다란 파도를 맞고 난 뒤 이젠 React라는 새로운 파도를 맞으려 한다. Node를 배울 때를 회상하고 1~2주 전에 React 특별 세션을 보고 개발 환경 구축할 때 설치해야 하는 npm이나 설정을 보고 약간 두렵지만.. 백엔드와 프론트엔드의 큰 파도를 다 맞고 나면 내가 무엇을 중점을 두고 개발자의 길을 걸을지 기대된다.
지금까지 나는 HTML, CSS, JS 이 세 가지를 이용해 웹을 개발했다. 버튼 한 번 클릭하면 이벤트 발생하고 키보드를 입력하면 화면에 보여지도록 웹을 개발 했다. 예를 들면 내용을 적어 버튼을 누르면 화면에 나타내게 한다면 ,
- 내용이 있는 DOM을 찾는다.
- 이 내용을 HTML에 태그를 만들어준다.
- 화면에 나타내게 한다.
이런 과정 과정들을 상태라 한다. 내가 만든 것은 학습에 초점을 두고 있어 이런 상태들이 복잡하고 많지 않지만 현역에서 웹을 개발하는 상황이라면 무수히 많은 상태들이 있을 것이고 관리해야할 DOM이 많아질수록 관리가 쉽지 않을 것이다. 그래서 이런 복잡하고 어려운 DOM과 상태 관리대신 기능개발에 중점을 두도록 만든 것이 React, Vue, Angular 등이 있다고 한다.
Prerequisite
React를 배우기 앞서 알고 있어야할 것들을 나열한다.
ES6
- Destructuring
- Spread Operator
- Rest Parameter
- Default Parameters
- Template Literals
- Arrow Function
- For-of Loop
React
react는 페이스북이 만든 사용자 인터페이스를 구축하기 위한 Javascript Library이다.
JSX
자바스크립트의 확장 문법이며, React Element를 생성한다.
function Hello() {
return (
<div class="div1">
<div class="userName">Chan</div>
<div class="content">Hello!</div>
<div class="room">public</div>
</div>
)
}물론 JS로 React를 사용할 수 있다. 하지만 JSX를 사용하지 않고 JS로 작성한다면 밑 처럼 복잡하고 가독성도 않좋다.
React.createElements('header', {className: '...'} ...);
React.createElements('p', {className: '...'} ...);하지만 JSX을 이용하면 복잡하지 않고 가독성도 좋아진다.
<header className = '...'> ... </header>
<p> ... </p>이렇게 JSX 문법을 이용하면 Babel이라는 것이 js로 작성된 코드로 변환시켜준다. 이렇게 편리하게 이용하는 대신 몇 가지 규칙이 있다.
- 반드시 하나의
태그로 감싸야 한다.
<div className="div1">
<div className="userName">Chan</div>
</div>
<div>
<div className="content">Hello!</div>
<div className="room">public</div>
</div>
// 위 코드는 태그가 2 개 이기에 사용할 수 없다.
// 밑 코드처럼 하나의 태그로 감싸져야 한다.
<div className="div1">
<div className="userName">Chan</div>
<div className="content">Hello!</div>
<div className="room">public</div>
</div>- JS를 적용할 땐
{}안에 작성해야 한다.
class App extends Component {
render() {
const name = 'Chan';
return (
<div>
Hello {name}
</div>
);
}
}-
JSX 내부에서는
if문을 사용할 수 없다. 삼항 연산자나 IIFE를 사용해야 한다. 내부라는 것에 주의하자! -
ES6에
class키워드가 있기 때문에 Element의 Class 이름을 적용할 때className을 사용한다.
Babel은 React.createElement()를 호출해 JSX를 컴파일한다.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// 위, 아래는 같다.
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);Component
- 하나의 의미를 가진 독립적인 단위 모듈이다. 쉽게 말해 나만의 HTML 태그라 할 수 있다.
- 이런 Component로 직관적이고 재사용성이 높다.
<div class="div1">
<div class="userName">Chan</div>
<div class="content">Hello!</div>
<div class="room">public</div>
</div>
<!-- 위에 형식을 아래의 형식으로 나만의 태그를 만들 수 있다. -->
<Paragraph userName="Chan" room="public">
Hello!
</Paragraph>이렇게 Component 기반이라면 HTML 코드를 일부 수정을 할 때 문제 해결이 문제를 키우는 불상사가 일어날 상황을 방지할 수 있고 손쉽게 Component 부분만 수정하면 된다. 개발할 때 함수(기능)를 쪼개서 개발을 하는 것과 같은 느낌으로 이해된다.
