react 를 시작하기 전 알아야 할 것들

Posted on | In
react의 핵심 기본 사항

우리가 react를 쓰는 이유

일반 js를 사용하여 이벤트에 따라 동적인 UI를 만들어 보았다면, 관리해야 할 DOM이 많아질수록 처리해야할 규칙이 복잡해져서 설계나 구현이 힘들어진다.

이러한 단점을 고려하여 구현 된 react는 자바스크립트의 특정 값이 바뀔 때, Virtual DOM 이라는 것을 메모리에서 구현하여 변화된 변수에 따라 전체 DOM이 아닌 특정 DOM만 업데이트 시킴으로써 성능과 편리성 모두를 제공하는 프레임워크이다.

React 살펴보기

React 프로젝트를 처음 생성하면 App.js의 렌더링을 기준으로 실제 DOM에 나타나는 것을 알 수 있다. 근데 사실 App.js를 나타내고 있는 index.js 가 따로 있다. index.js를 살펴보면..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App 컴포넌트를 id가 root인 DOM에 나타내는 것으로 보인다. root를 따라가면 index.html이 나오게 되고, body부분을 보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="root"></div>
	<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

이렇게 root 가 div 요소를 가리키고 있는 걸 확인할 수 있다. index.html에 나타내는 이러한 원리를 파악해두는게 시작하기에 있어 중요한 것으로 보인다.

React의 문법 JSX의 기본규칙

JSX는 React에서 생김새를 정의할 때, 사용하는 문법으로 JSX방식으로 작성하게 되면 babel(자바스크립트의 문법을 확장해주는 도구)이 JSX를 JavaScript 로 변환 해준다. 이러한 JSX를 이용하기 위한 중요한 규칙들을 보자.

1
2
3
4
5
1. 태그를 사용하면 꼭 닫아주어야 한다.
2. return하게 될 태그는 2개이상이 될 수 없으므로 꼭 하나의 태그로 감싸준다.
3. 자바스크립트 변수를 사용할 때는 {}로 감싸서 보여준다.
4. 기존 html, css 에서 사용하던 이름과 방식이 조금 다른데, camelCase(이어지는 단어 첫글자는 대문자로 나타내는 방식 ex)onClick) 형태로 네이밍 해주어야 한다.
5. 주석은 {/* 내용 */} 형태로 작성한다.

이렇게 5가지는 알고 있는게 사용하는데 문제가 안생긴다.