React 용어정리
앱같은 경험을 웹에서 구현가능하게 해준다.
리액트의 장점 왜 사용하는지
- 사용자 경험
- 재사용 컴포넌트
- 데이터-화면 일치
용어정리
Virtual DOM
Virtual DOM은 가상의 DOM 이다. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운걸 넣는것이 아니라, 자바스크립트로 이루어진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교해 변화가 일어난 곳 or 필요한 곳에만 업데이트를 해주는 것이다.
SPA
SPA(Single Page Application)? 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션이다. 전통적인 웹 방식은 요청 시 계속해서 새로고침이 일어나면서 서버로 부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이였다.
그러나 SPA는 단어 뜻 그대로 페이지가 1개인 어플리케이션을 의미한다.
Component
조각이라고 생각할 수 있다. 사용자에게 중요한 정보이다
render
어떻게 화면에 표시할 것인지 결정하는 메서드라고 생각할 수 있다.
즉, HTML요소(element), 또는 React 요소 등의 코드를 눈으로 볼 수 있도록 그리는 것을 렌더링이라고 한다.
엘리먼트는 react의 가장 작은 단위인데 엘리먼트는 화면에 표시할 내용을 담고 있다. 브라우저 DOM 엘리먼트와는 다르게 react의 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트ㅏ와 일치하도록 DOM을 업데이트 한다.
여기서 React요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용한다.
첫 번째 인자에는 JSX로 React 요소를 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.
JSX
HTML 문법을 JavaScript 코드 내부에 쓴것이 바로 JSX이다.
JavaScript eXtension의 약자이고 자바스크립트의 확장 버전이라는 의미이다.
React에서 HTML을 표현할 때 JSX를 사용하고 외괸상 HTML같은 마크업 언러를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Bable에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.
정리하면 JSX는 자바스크립트 안에서 HTML 문법을 사용해 View를 구성할 수 있게 도와주는 자바스크립트 문법이다.
props
부모 컨포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정하는 것은 불가능하다. (속성 properties의 약자)
가끔씩 자식 컴포넌트에서 props를 빼먹는 경우를 대비해 defaultProps를 생성해 줄 수 있다.
State
state와 props의 차이점
props와 state는 모두 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있는데, 한 가지 중요한 방식에서 차이가 있다.
props는 (함수의 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트안에서 관리된다.
React에서 this,props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 것을 말한다.
setState 호출은 비동기적으로 이루어진다. 따라서 setState 호출 직후 새로운 값이 this.state에 반영될 거라고 믿어서는 안된다.
항상 setState 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 setState 에 객체 대신 함수를 전달해야 한다.
관련 예시 코드
import React, { Component } from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import './App.css';
//component를 만드는 코드
class App extends Component {
constructor(props) {
super(props);
// state 값을 초기화 어떤 컴포넌트가 실행될때 render보다 먼저 실행되면서 (자바의 생성자)
// 초기화 시켜주고 싶은 코드를 이곳에 넣는다.
this.state = {
mode:'Welcome',
subject:{title:'WEB', sub:'World Wide Web!'},
welcome:{title:'Welcome', desc:'Hello, React!!'},
contents:
[
{id:1, title:'HTML', desc:'HTML is HyperText...'},
{id:2, title:'CSS', desc:'CSS is for design'},
{id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
]
}
}
// 어떤 HTML 함수를 그릴것인지 결정하는 함수 render
render() {
console.log('App render');
var _title, _desc = null;
if(this.state.mode === 'welcome') {
_title = this.state.welcome.title;
_desc = this.state.welcome.desc;
} else if(this.state.mode === 'read') {
_title = this.state.contents[0].title;
_desc = this.state.contents[0].desc;
}
console.log('render', this);
return (
<div className="App">
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}
onChangePage={function () {
this.setState({ mode: 'welcome' });
}.bind(this)}
>
</Subject>
{/* <Subject ctrl+k+c 여러 줄 주석
title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject> */}
{/* <header>
<h1><a href="/" onClick={function (e) {
console.log(e);
e.preventDefault(); // a태그의 기본적인 동작을 막는다
// this.state.mode = 'welcome';
this.setState({ mode: 'welcome' });
}.bind(this)}>{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header> */}
<TOC onChangePage={function () {
alert('hi');
this.setState({ mode: 'read' });
}.bind(this)}
data={this.state.contents}></TOC>
<Content title={_title} desc={_desc}></Content>
</div>
);
}
}
export default App;