1. React 개요
사용자와의 interaction이 많아짐에 따라서, DOM 관리와 상태값 지정이 복잡해졌고, 이에 따라 기능 요소에만 집중하는 Library가 생겨나게 되었다. 그중 하나가 React 이다.
React는 컴포넌트(Component) 개념에 집중하는 프론트엔드 라이브러리이다. 컴포넌트란 '하나의 의미를 가진 독립적인 단위 모듈'을 의미한다. React에서는 의미와 기능을 갖는 Tag 자체를 만든다.
이번 글에서는 React 설치 방법과 React를 구성하는 기본개념인 JSX, 엘리먼트 렌더링, Component와 Props에 대해서 알아본다.
2. JSX
JSX 사용 이유
어떤 엘리먼트를 만들 때, HTML tag까지 함께 지정한다.
JSX : Javascript의 태그 형식 문법. JSX를 사용하면 코드의 복잡도가 감소하고 가독성이 증가한다.
원래 HTML과 Javascript는 DOM 구조를 통해서 HTML의 마크업(태그 같은 것) 기술과 Javascript의 논리구조 기술을 합치는 형태인데, JSX는 이것을 둘 다 포함하는 '컴포넌트' 형태로 프론트엔드 작업을 편리하게 하고, 기능에만 집중할 수 있도록 한다.
기존에는 HTML 하나를 생성하고, 선택하고, 추가하는 등의 작업을 .createElement, .querySelector, .appendChild 등과 같은 코드를 통해서 가능하게 했었다. 그리고 여기에다 Javascript 코드를 적용해서 웹페이지를 렌더링(웹페이지 편집) 했는데, JSX는 이것을 한번에 가능하게 하는 문법이다. 중괄호 {}를 사용하는데, 자세한 예제는 다음 섹션의 코드들을 살펴보면서 자연스럽게 익힐 수 있다.
※ 마크업(위키백과 : HTML, https://ko.wikipedia.org/wiki/HTML)
JSX 표현식에 Javascript 표현식 넣기
JSX 표현식은 아래 코드의 2번줄과 같은 형태로 작성한다. 여기서 중괄호 {} 안에 name으로 선언된 Javascript 변수가 들어있음을 확인할 수 있다. Javascript 표현식은 중괄호 {} 안에 넣어주어야 한다!
이외에도 이 중괄호 안에 1 + 1, user.firstName, formatName(user) 등과 같이 연산식, 객체의 값, 함수 등 Javascript 표현식을 넣을 수 있다.
|
1
2
3
4
5
6
7
|
const name = 'Kimchi Jjigae';
const element = <h1> Hello, {name} </h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
|
cs |
JSX 표현식 규칙
1. 반드시 하나의 엘리먼트로 감싸야 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// X
<div>
<h1>hello</h1>
</div>
<div>
<h1>hi</h1>
</div>
// O
<div>
<div>
<h1>hello</h1>
</div>
<div>
<h1>hi</h1>
</div>
</div>
|
cs |
2. JSX 내부에서 조건문을 작성할 때는 IIFE나 삼항연산자를 사용해야 한다.
(IIFE : chanlee.github.io/2014/01/11/understand-javascript-iife/)
|
1
2
3
4
5
|
<div>
{
(1 + 1 === 2) ? (<h1> O </h1>) : (<h1> X </h1>)
}
</div>
|
cs |
3. ES6 문법 중 Class가 있으므로 class 대신 className을 사용함.
|
1
2
3
4
5
|
// X
<div class = 'greeting'> hello </div>
// O
<div className = 'greting'> hello </div>
|
cs |
3. React 설치
React는 npm과 create-react-app 을 이용해서 시작한다.
원래 React는 webpack, babel 등과 같은 번들러(bundler)를 이용해서 작업을 해야한다. 그러나 이런 모든 것들을 배우지 않고도 react 개발을 할 수 있는데, 그것이 create-react-app 이다. React를 개발한 facebook에서 지원해주는 스타터 킷이다. create-react-app을 통해서 React를 만들어보자!
-참고
Babel
Javacript 코드를 각 브라우저(Chrome, Internet Explorer)에 맞는 코드, 또는 ES6, ES7 등과 같은 Javascript의 각 문법에 맞는 코드로 변환시켜주는 번역기 같은 라이브러리다. 특히나 정부 기관 등에서 사용하는 Explorer에서 작동하는 코드를 만들기 위해서 Babel을 사용하기도 한다고 한다.
(운동할때 쓰는건 Barbell이고, Babel은 바벨의 첨탑할 때 Babel과 철자가 같음 ㅎㅎ)
번들러(개념만)
번들러는 여러개의 기능을 갖는 Javascript 파일들을 한데로 뭉친 파일이다. 예를 들어서 어떤 프로그램이 a, b, c 라는 코드를 필요로 하고, 각 코드가 export 및 import 되면서 서로 불러와지고, 이용되는 구조로 짜진 프로그램이라면 이 프로그램을 번들러로 만들어 하나로 통합할 수 있다. 번들러만 있어도 프로그램을 구동시킬 수 있다.
Create-react-app
해당 키트를 설치하기 전에 기본적으로 npm과 nodejs가 설치되어 있어야 한다. (Node.js / 기초 )
터미널에서 npx create-react-app <파일이름> 을 입력하면 React 앱을 만들 수 있다.
coffee 라는 이름으로 제작한 React 앱. 설치된 디렉토리에서 npm start라고 입력하면 위 그림과 같은 React 애니메이션이 웹에서 작동하는 것을 볼 수 있다.
React의 기본 파일구조
1. public 폴더 : react는 가상 DOM을 이용하므로 실제 DOM이 필요한데, 이에 필요한 파일들이 들어있는 폴더이다. 여기에 index.html이 있고, id가 'root'인 div 요소가 body에 있음을 확인할 수 있다. React로 작업을 하면, 마치 내가 DOM 문서를 작성하듯이 해당 엘리먼트에 새로운 엘리먼트들을 추가해주는 역할을 한다.
2. src 폴더 :
App.js에서 렌더링할 react 코드를 작성한다.
그것을 index.js 폴더로 import하면, ReactDOM.render(<App />)에 의해서 public 디렉토리의 index.html의 'root'에 추가해주는 체계이다.
4. 엘리먼트 렌더링
React에서의 엘리먼트 속성
React 엘리먼트는 생성한 이후 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 시점이 고정되는 것이다.
아래 코드에서처럼 'element'를 선언하고 나면, 선언된 그 때의 element로 정해지게 된다.
<div> element의 자식인 <h2>를 바꾸기 위한 방법은 ReactDOM.render를 이용하는 것이다. 즉, 렌더링을 다시 해줌으로써 element를 새로이 호출하는 것이다. 다시 말해서 DOM 방식으로
let a = element.querySelector('h2')
a.textContent = "안녕하세요"
와 같은 방식으로 직접 바꾸는 것이 아니라, 추후에 이해하게 될 렌더링을 다시 하는 방식으로 아예 <div> 엘리먼트를 새로운 조건으로 재생성하는 방식으로만 속성을 변경할 수 있는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
|
cs |
Virtual DOM
react는 실제 HTML에서의 DOM 구조를 직접적으로 바꾸지 않고, virtual DOM을 이용한다. 원래 이벤트 등으로 인해 DOM의 구조가 변경되면 브라우저는 변경된 부분뿐만 아니라 DOM의 스타일 전체를 다시 렌더링하게 되는데, 이에 따른 시간과 자원소모가 크기 때문에 react에서 채택한 방식이다. virtual DOM을 만들어 변경된 요소들을 업데이트하고, virtual DOM과 실제 DOM 을 비교한 후 변경된 요소만을 업데이트 하는 방식으로 효율적인 처리를 한다.
5. Components
맨 처음 React는 컴포넌트에 집중한 라이브러리라고 했다. 일반적으로 생각하는 특정한 기능을 갖는 각 함수들을 컴포넌트라고 생각하고 공부하면 된다. 컴포넌트를 만들고 나면 내가 정의한 컴포넌트 이름으로 태그를 사용할 수 있다. 예를 들어서 Greeting 이라는 컴포넌트를 작성했다면, 다른 곳에서 "<Greeting (속성) />"과 같이 태그 형태로 사용하면 된다.
컴포넌트를 작성하는 방식은 함수 컴포넌트와 클래스 컴포넌트 2가지가 있다.
함수 컴포넌트와 클래스 컴포넌트
보통은 클래스 컴포넌트 방식을 이용하지만, 공식문서에서는 간결성을 위해서 함수 컴포넌트로 설명되어 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 함수 컴포넌트 방식
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
//클래스 컴포넌트 방식
class Welcome extends React.Component {
constructor(props) {
super(props)
this.state = { greet : hello }
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
|
cs |
props를 파라미터로 받는다는 점, 클래스 컴포넌트는 extends React.Component를 쓰고 constructor, super, this.state 등을 쓴다는 점 등 형식이 어떤지 개략적으로만 알고 일단 넘어간다. 다만, 두 방식의 가장 큰 차이점은 클래스 컴포넌트의 경우에는 state를 정의할 수 있다는 것이다. 어떤 클래스의 state를 정의해줌으로써 컴포넌트에 변하는 속성을 만들어줄 수 있게 된다! 이러한 이유로 대체로 클래스 컴포넌트 형식으로 작성한다.
위와 같이 컴포넌트를 정의하고 나면 태그 형태로 컴포넌트를 사용할 수 있다.
또한 컴포넌트의 값을 컴포넌트를 호출하면서 지정해줄 수 있다.
|
1
2
3
4
5
6
7
8
|
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name = "Jerry" />;
ReactDOM.render(
element, document.getElementById('root')
);
|
cs |
참조
React 공식문서 홈페이지 : ko.reactjs.org/
리액트 설치 : 블로그
다음글
'Programming-[Frontend] > ReactJS' 카테고리의 다른 글
| React / Router (0) | 2020.10.19 |
|---|---|
| React / Hook / 개요 (0) | 2020.10.18 |
| React / 기초2 / State, props와 클래스 컴포넌트 작성 : dark mode 구현해보기 (0) | 2020.10.14 |
| React / 기초4 / 이벤트 처리하기 (0) | 2020.10.06 |
| React / 기초3 / LifeCycle (0) | 2020.10.06 |
