React 핵심 개념
React는 프레임워크가 아닌 라이브러리로 애플리케이션 공통적인 부분의 재사용에 최적화 되어있다. 재사용을 위해 리액트 문법을 통해 사용자 정의 태그를 만드는데 리액트에서는 이를 Component라고 한다. 가상 DOM을 사용하며 UI를 컴포넌트화 하여 UI의 수정 및 재사용이 간편하고 서버/클라이언트 사이드에서 재사용이 가능하다.
react와 node,npx
react는 node 설치 이후 npx create-react-app [폴더명] 명령어로 설치할 수 있는데 npx는 앱을 딱 한번 설치하고 지우는 명령어로 공간을 낭비하지 않게 해준다. npm은 node.js로 만들어진 여러 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 하는 것이다. 쉽게 말해 node.js의 플레이 스토어 느낌이라고 생각하면 된다.
React 배포
기본적으로 react는 SPA 형식으로 뷰화면으로 로드된다. 즉 서버사이드에서 뷰 렌더링을 하는 것이 아닌 웹 브라우저가 담당하게 되는 것이다. chrome에서 리로드 아이콘에 우클릭 하면 캐시 지우고 강력한 리로드를 할 수 있다.
실제 프로덕트 환경에서는 압축해서 파일들을 가져와야 하기 때문에 npm run build를 하면 build 폴더에 압축된 형식의 파일들이 렌더링된다. npx serve -s build 명령어를 통해 build 폴더 내에 파일들을 간단히 웹서버로 띄울 수 있다.
개발환경에서는 npm run start를 통해 react를 실행하면 된다.
React Render
component 만들고 이를 Render 혹은 Return할떄 반드시 html태그는 하나의 최상위 태그로 감싸져 있어야한다.return 해서 나오는 html은 유사 javascript이다. 이를 jsx라고 한다.
항상 만든 컴포넌트가 고정적인 내용 뿐 아니라 props,state를 이용해 상황별 다양한 동적인 커스텀 태그를 만들 수 있다.
Component 파일로 분리하기
props 는 사용자 입장에서 중요한 것이고 props 값에 따라서 내부에 구현하는 것이 state이다. 보통 다른 component에 데이터를 보낼 때 props를 사용한다. 사용자는 알아서 안되는 component 내부적으로 사용하는 것을 state에 정의하고 state 안의 값이 변경될때마다 뷰화면은 재로딩된다.
App.js
import React, {Component} from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
mode: "create",
subject: {title: "WEB", subtitle: "World wide web"},
}
};
render() {
console.log("App render");
console.log('render', this);
return (
<div className="App">
<Subject
title={this.state.subject.title}
subtitle={this.state.subject.subtitle}
onChnagePage={function () {
this.setState({mode: "welcome"})
}.bind(this)}
/>
)
}
}
Subject.js
importReact, {Component} from "react";
class Subject extends Component {
render() {
return (
<header onClick={this.test}>
<h1>
<a
href={"/"}
onClick={function (e) {
this.props.onChnagePage();
e.preventDefault();
}.bind(this)}
>
{this.props.title}
</a>
</h1>
{this.props.subtitle}
</header>
);
}
}
export default Subject;
위와 같은 형식으로 컴포넌트가 데이터 교환을 한다. 이 때 함수를 호출하는 부분에서 function 문법을 사용하면 bind(this)를 통해 class this를 넘겨야하지만 화살표함수를 사용시 bind(this)를 생략 가능하다.
요소 반복 및 key
importReact,{Component} from "react";
class TOC extends Component {
render() {
var lists = [];
let data = this.props.data;
let i =0;
while (i < data.length) {
lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)
i = i + 1;
}
return (
<nav>
<ul>
{lists}
</ul>
</nav>
);
}
}
export default TOC;
요소를 반복할 때 key 요구하면 element 고유값을 넣어주어야 한다. {}안은 jsx 변수 및 문법 사용이 가능하다.
React 개발 팁
state, props 변경시에 해당 것을 포함하고 있는 component가 재 rendering 된다. 이를 꼭 기억하자. 이러한 부분 때문에 UI에 영향을 주지 않는 요소들은 state안에 두지 말고 밖에다가 둔다.
constructor(props) {
super(props);
this.max_content_id = 3;
this.state = {
mode: "create",
selected_content_id: 2,
welcome: {title: "Welcome", desc: "Hello, React"},
subject: {title: "WEB", subtitle: "World wide web"},
contents: [
{id: 1, title: "HTML", desc: "HTML IS for information"},
{id: 2, title: "CSS", desc: "Css IS for information"},
{id: 3, title: "Javascript", desc: "JS IS for information"}
]
}
};
- js에서 debugger 코드를 만나면 거기서 멈춘다.
- 반드시 state 상태를 바꿀때는 this.setState 함수를 사용해야 UI에 영향을 준다.
this.setState({
contents:_contents
})
constructor 함수에서는 this.state ={} 형태로 값을 수정할 수 있지만 render 부분 태그 함수 부분에서는 this.setState를 통해서만 값을 변경해야한다. 그러한 이유는 컴포넌트를 다시 render하는 기준은 setState를 통한 값 변경이다.
State와 Props
state는 변경이 가능하고 props는 read-only이다. 상위 컴포넌트가 하위 컴포넌트 상태에 영향을 끼칠때는 props를 사용하고 반대의 경우에는 event를 활용한다.
redux
컴포넌트만의 데이터 저장소가 아닌 모든 컴포넌트에 영향을 끼치는 데이터 저장소
React 최적화
- array에서 push는 원본을 바꾸고 concat은 원본을 변경하지 않음 (concat을 사용하자, 이는 state에 등록된 원본이 변경될때마다 render를 다시하기 때문에 concat을 통해 값을 변경한다.)
- shouldComponentUpdate() 함수를 사용하면 state 변수값이 변경되어도 해당 함수 return이 true면 render하고 false면 다시 render하지 않음