React Basic - hochan222/Everything-in-JavaScript GitHub Wiki
React는 SPA (Single Page Application) 즉, 단일 페이지 응용 프로그램에서 사용자 인터페이스를 구성는데 사용되는 오픈 소스 프론트엔드 JS 라이브러리 입니다.
웹 및 모바일 앱의 Layer 를 다루는데 사용됩니다. 리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke 에 의해 만들어졌습니다.
리액트는 2011 년 페이스북 뉴스피드에 발표되었고, 2012년 인스타그램에 처음 구축되었습니다.
React 의 주요 특징은 아래와 같습니다.
- RealDOM 을 조작하는데 많은 비용이 들어간다는 점을 고려하여 리액트는 RealDOM 대신 VirtualDOM을 사용합니다.
- Virtual DOM이라는 걸 도입하여 DOM을 직접 계산하지 않고 내부적으로 빠르게 diff를 계산하는 알고리즘을 만들었다. 처음에는 O(n3) 이였으나 결국 O(n)으로 만들었다.
-
서버 사이드 렌더링을 지원합니다.
- React는 처음부터 서버 사이드 렌더링을 고려하여 설계했다.
- 단방향 데이터 흐름 또는 데이터 바인딩을 따릅니다.
- props, useState
- UI 구성 요소를 재사용할 수 있도록 개발할 수 있습니다.
JSX 는 JS XML (ECMAScript로 XML 유사 구문 확장) 의 구문 표기법입니다. JSX 는 JS XML의 약자입니다.
HTML과 같은 문법과 함께 JS를 표현할 수 있습니다.
예를 들면 아래의 h1 태그안에 text 는 render 함수에 의해 JS 함수로 반환됩니다.
render() {
return (
<div>
<h1> Welcome to React world!!</h1>
</div>
);
}element는 DOM 노드 또는 다른 component들과 관련하여 화면에 표시 할 내용을 표현하는 일반 객체입니다. elements는 다른 elements 들을 포함할 수 있습니다. React element를 만드는 비용은 저렴합니다. element 는 생성되면 변형되지 않습니다. 리액트 element 의 표현은 아래와 같습니다.
const element = React.createElement("div", { id: "login-btn" }, "Login");위에서 만들어진 element 는 아래와 같은 객체로 리턴됩니다.
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}마지막으로 아래와 같이 ReactDOM.render 를 이용하여 DOM 으로 렌더링합니다.
<div id="login-btn">Login</div>반면 component 는 여러 방법으로 선언될 수 있습니다. render 메서드가 있는 class 일 수도 있습니다. 간단한 component 일 경우 function으로 정의 될 수 있습니다. 입력된 component 를 바탕으로 element 트리를 만듭니다. 마지막에 JSX 는 createElement로 변환됩니다.
function Button({ onLogin }) {
return React.createElement(
"div",
{ id: "login-btn", onClick: onLogin },
"Login"
);
}ReactJS 는 Components 생성하는 두 가지 방법이 있습니다.
Functional components
ReactJS 에서 component를 생성하는 가장 간단한 방법입니다. props 를 받을 수 있고 React elements 를 리턴할 수 있습니다. 이런 방법을 pure 한 JS의 function 이기 때문에 functional한 생성법이라고 부릅니다.
function Greeting(props) {
return <h1> Hello, {props.message}</h1>;
}Class components
ES6 Class를 사용하여 component 를 정의할 수 있습니다. 위에서 본 functional 선언법을 아래와 같이 적용할 수 있습니다.
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.message}</h1>;
}
}Component 에서 state 또는 life cycle methods 를 필요로 한다면 Class component를 사용하고 그렇지 않다면 Functional component를 사용할 수 있습니다.
PureComponent는 동일한 상태에서는 동일한 결과를 반환합니다. shouldComponentUpdate 메서드를 다룰 수 있다는 점을 제외하고는 component와 동일합니다.
props 또는 state 가 변경될 때 PureComponent 는 state 와 props 에 대해 Shallow Compare을 수행합니다.
반면 component는 현재 props와 변형될 state를 비교하지 않습니다. 그렇기 때문에 component는 shouldComponentUpdate가 호출 될 때 마다 다시 render 됩니다. (shouldComponentUpdate의 기본값은 true 이기 때문에)
Component State 는 component의 life cycle 동안 변경될 수 있는 정보를 담고 있는 객체입니다. 우리는 state를 가능한 단순하게 만들고 state 의 구성 요소의 수를 최소화하기 위해 노력해야 합니다.
message state를 가진 user component 를 생성해보겠습니다.
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "Welcome to React world"
};
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
);
}
}
Props 는 HTML 태그 속성과 유사한 규칙을 사용하여 React component 에 전달되는 값을 포함하는 단일 값 또는 객체입니다. 부모 component 에서 자식 component 로 전달되는 데이터 입니다.
React에서 props 의 목적은 아래와 같은 기능을 component에 제공하는 것 입니다.
- 사용자 정의 데이터를 React component 로 전달할 수 있습니다.
- State 변경을 Trigger 할 수 있습니다.
- Component 의 render 메서드 안에서 this.props.reactProp 로 접근하여 사용할 수 있습니다.
예를 들어, reactProp를 받는 element 를 만들고
<Element reactProp="1" />이 "reactProp" (또는 사용자가 찾은 정의한) props는 React를 사용하여 생성된 component에서 접근이 가능하고, React의 native props 영역에 포함된 속성이 됩니다.
props.reactProp;props와 state는 모두 JavaScript 객체입니다. 두가지 다 렌더링 결과에 영향을 주는 정보를 가지고 있지만, component 와 관련된 기능면에서 차이가 있습니다.
props는 함수 매개변수와 같이 component 요소로 전달됩니다. state 는 component 안에서 관리되고 사용할 변수 선언과 비슷합니다.