Introducing Microservice React !!

Microservice React is space to learn with React.

Contents

Table of Contents

Learning

Table of Learning

Get Started(React)

0. Node.js 설치

• Web 서버 구축을 위한 Node.js 설치
• Node.js 다운로드

React로 프로젝트 만들기

1. CRA(Create React App) 설치하기

• NPM 명령어를 이용해서 CRA를 설치할 수 있습니다.

  npm install -g create-react-app
  

  2. React 프로젝트 생성하기

• 특정한 폴더로 이동하여 create-react-app 명령어를 이용하여 spa라는 폴더를 만들어 보도록 하겠습니다.

• #c:\Data\create-react-app jobmarketplace
  #D:\Project\Java\react> create-react-app spa
  $ npx create-react-app spa
  # or
  $ yarn create react-app [프로젝트명]
  

3. 서버 가동하기

• yarn으로 가동 가능, 만약 yarn이 설치 안되어 있으면…

npm install --global yarn
yarn start

yarn start = (npm start)
yarn build = (npm run build)
yarn test  = (npm run test)
yarn eject = (npm run eject)

• Windows에서 실행 스크립트 오류날때

Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope LocalMachine

• npm으로 가동하기 위해서는 아래와 같이 함.(npm start)

4. 페이지 이동을 구현하기 위해 router 구현

$ npm install react-router-dom —save 
or
$ yarn add react-router-dom

5. Styled Component 설치

Sytled-component

JS 안에 CSS 를 작성 Tagged Template Literal 이라는 문법 사용 가능

$ npm install --save styled-components
# or
$ yarn add styled-components

6. 사라지는 메시지 출력 위해 toast 라이브러리를 적용

• react-toasts 를 사용하여 toast popup 띄우기

$ npm install -s react-toasts

7. 서버와의 통신목적의 라이브러리 axios를 설치(From React client)

$ npm install --save axios
# or
$ yarn add axios

8. Node.js 서버 파일 업로드 처리 라이브러리 multer를 설치(From Node.js Server)

$ npm install --save multer

React

• 벨로퍼트와 함께하는 모던 리액트

Virtual DOM 은 가상의 DOM 인데요, 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM 으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜줍니다

class 하나가 Component 하나 임.

1. JSX

JSX(JavaScript + XML) : javascript에서 html tag를 사용하게 해줌 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다. TEXT 영역에 {}를 사용하면 javascript문법을 사용 가능함. JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다릅니다. 우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다. CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야 합니다. JSX 내부의 주석은 {/* 이런 형태로 */} 작성합니다.

<button onclick="() => { console.log('clicked') }" type="submit">Like</button>
$('button').text('Liked');

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liked: false,
    }
  }
  render() {
    return <button type="submit" onClick={() => {this.setState({liked:true})}}>Like</button>;
    //  e(
    //   'button',
    //   { onClick: () => { this.setState( { liked: true})}, type: 'submit' },
    //   this.state.liked === true ? 'Liked' : 'Like',
    // );
  }
}

2. Prop vs State

① props 를 통해 컴포넌트에게 값 전달하기

props 는 properties 의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다. props 는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name 을 조회하면 됩니다.

import React from 'react';

export default
function Hello(props) {
  return <div style=>안녕하세요 {props.name}</div>
}

• props 비구조화 할당 ```javascript import React from ‘react’;

export default function Hello({ color, name }) { return <div style=>안녕하세요 {name}</div> }

* props.children

> 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 됩니다.
> props 이름만 작성하고 값 설정을 생략한다면, 이를 true 로 설정한 것으로 간주합니다.

#### ② state : 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다.

> 리액트에 useState 라는 함수를 사용 하여 컴포넌트에서 상태를 관리.
> 함수형 업데이트(prevNumber => prevNumber + 1)는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용

```javascript
import React, { useState } from 'react';

/**
 *
 *
 * @export
 * @return {*}
 */
export default function Counter() {
    const [number, setNumber] = useState(0);

    const onIncrease = () => {
        // 함수형 update → 컴포넌트를 최적화 할때 사용
        setNumber(prevNumber => prevNumber + 1);
    };
    const onDecrease = () => {
        setNumber(prevNumber => prevNumber - 1);
    };

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    );
}

리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태 onClick={onIncrease()}

이벤트에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르키게됩니다. 이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있습니다.

import React, { useState } from 'react';

/**
 *
 *
 * @export
 * @return {*}
 */
export default function Input() {
    const [text, setText] = useState('');

    const onChange = e => {
        setText(e.target.value);
    };

    const onReset = () => {
        setText('');
    };

    return (
        <div>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: {text}</b>
            </div>
        </div>
    );
}

리액트 상태에서 객체를 수정해야 할 때에는,inputs[name] = value; 이런식으로 직접 수정하면 안됩니다.그 대신에, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 합니다. setInputs({ ...inputs, [name]: value });

import React, { useState, useRef } from 'react';

export default function InputMolecules() {
    const [inputs, setInputs] = useState({
        name: '',
        nickname: '',
    });

    const nameInput = useRef();

    const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

    const onChange = e => {
        const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
        setInputs({
            ...inputs, // 기존의 input 객체를 복사한 뒤
            [name]: value, // name 키를 가진 값을 value 로 설정
        });
    };

    const onReset = () => {
        setInputs({
            name: '',
            nickname: '',
        });
        nameInput.current.focus();
    };

    return (
        <div>
            <input
                name="name"
                placeholder="이름"
                onChange={onChange}
                value={name}
                ref={nameInput}
            />
            <input
                name="nickname"
                placeholder="닉네임"
                onChange={onChange}
                value={nickname}
            />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                {name} ({nickname})
            </div>
        </div>
    );
}

③ useRef 로 특정 DOM 선택하기

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있겠죠. 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있습니다. 그럴 땐, 리액트에서 ref 라는 것을 사용합니다. 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용합니다 useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 됩니다. 위 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출해주었습니다.

④ React에서 배열 Rendering 하기

리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 배열을 렌더링 할 때에는 고유한 key 값이 있는것이 중요하며, 만약에 배열안에 중복되는 key 가 있을 때에는 렌더링시에 오류메시지가 콘솔에 나타나게 되며, 업데이트가 제대로 이루어지지 않게 됩니다.

import React from 'react';

function User({ user }) {
    return (
        <div>
            <b>{user.username}</b> <span>({user.email})</span>
        </div>
    );
}

export default function UserStore() {
    const users = [
        {
            id: 1,
            username: 'velopert',
            email: 'public.velopert@gmail.com',
        },
        {
            id: 2,
            username: 'tester',
            email: 'tester@example.com',
        },
        {
            id: 3,
            username: 'liz',
            email: 'liz@example.com',
        },
    ];

    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} />
            ))}
        </div>
    );
}

만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하시면 됩니다.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

배열에 새 항목을 추가 할 때에는 spread 연산자를 사용하거나, concat 을 사용하시면 됩니다. 배열에 있는 항목을 제거할 때에는, 추가할떄와 마찬가지로 불변성을 지켜가면서 업데이트를 해주어야 합니다. 불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장 함수를 사용하는것이 가장 편합니다. 이 함수는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어줍니다.

컴포넌트 마운트시 하는 주요 업무

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등…)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣습니다. 만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출됩니다.그리고, useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부릅니다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하시면 되는데요, deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출됩니다.

useEffect 안에서 사용하는 상태나, props 가 있다면, useEffect 의 deps 에 넣어주어야 합니다. 그렇게 하는게, 규칙입니다.만약 useEffect 안에서 사용하는 상태나 props 를 deps 에 넣지 않게 된다면 useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않게 됩니다.

리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 됩니다.

useMemo 의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고 두번째 파라미터에는 deps 배열을 넣어주면 되는데, 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 됩니다

const count = useMemo(() => countActiveUsers(users), [users]);

useReducer 상태 업데이트 로직을 컴포넌트에서 분리 reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됩니다.

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

const [state, dispatch] = useReducer(reducer, initialState); state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생시키는 함수 dispatch({ type: ‘INCREMENT’ }). useReducer 에 넣는 첫번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기 상태입니다.

React 최적화 작업

함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다. 함수를 선언하는 것 자체는 사실 메모리도, CPU 도 리소스를 많이 차지 하는 작업은 아니기 때문에 함수를 새로 선언한다고 해서 그 자체 만으로 큰 부하가 생길일은 없지만, 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 여전히 중요합니다. 그 이유는, 우리가 나중에 컴포넌트에서 props 가 바뀌지 않았으면 Virtual DOM 에 새로 렌더링하는 것 조차 하지 않고 컴포넌트의 결과물을 재사용 하는 최적화 작업을 할건데요, 이 작업을 하려면, 함수를 재사용하는것이 필수입니다.

컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리 setter 를 한 함수에서 여러번 사용해야 하는 일이 발생한다면, useReducer사용 고민 필요

setUsers(users => users.concat(user));
setInputs({
  username: '',
  email: ''
});

Class형 Component

클래스형 컴포넌트에서는 render() 메서드가 꼭 있어야 합니다. 이 메서드에서 렌더링하고 싶은 JSX 를 반환하시면 됩니다. 그리고, props 를 조회 해야 할 때에는 this.props 를 조회하시면 됩니다. 상태를 업데이트 할 때에는 이 메서드에서 this.setState 라는 함수를 사용해야 하는데요,

React의 라이프 사이클(Life Cycle) 이해

• Hook 사용시에는 그렇게 중요하지 않다

• 기본적으로 리액트 라이브러리가 처음 컴포넌트를 실행할 때는 다음의 순서를 따릅니다.

① constructor()

constructor 는 컴포넌트의 생성자 메서드입니다. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다.

② componentWillMount()

③ render()

④ componentDidMount()

컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드입니다. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태입니다. 여기선 주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다

Mobx

• veloper Mobx
• 

$ yarn add mobx mobx-react
# decorator 사용하기
$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators
# or
$ npm i --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

yarn add --dev customize-cra react-app-rewired @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties core-decorators mobx mobx-react autobind-decorator
#yarn add --dev customize-cra
#yarn add --dev react-app-rewired
#yarn add --dev core-decorators 

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

• tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
  }
}

• material ui icons

$ yarn add @material-ui/icons
$ yarn add @material-ui/pickers
$ yarn add @date-io/date-fns
#$ yarn add date-fns
#$ yarn add moment
$ yarn add @date-io/date-fns@1.x date-fns
$ yarn add @date-io/moment@1.x moment
# $ yarn add @date-io/luxon@1.x luxon
# $ yarn add @date-io/dayjs@1.x dayjs

Design

• 리액트 어플리케이션 구조 - 아토믹 디자인
• Atomic Design 적용기
• 

1. Atomic Design

간략한 특징은 다음과 같이 Atoms(원자), Molecules(분자), Organisms(유기체), Templates, Pages 분류로 React Component의 종류와 규모에 맞게 적절히 분류해서 생성하여 관리합니다.

a. Atomic Design 단계 구분

• Atoms(원자), Molecules(분자), Organisms(유기체), Templates, Pages

Atoms(원자) : 가장 작은 단위의 컴포넌트들로 버튼, 체크박스, div, radio 박스, span, textarea 등 html로 개발 시 사용 되는 대부분의 태그들을 atom 컴포넌트로 생성해 놓음 Molecules(분자) : 두개 이상의 atom 묶음, 또는 기능이 추가된 컴포넌트 organisms : molecule보다 더 많은 컴포넌트들의 묶음, 또는 더 많은 기능이 추가된 컴포넌트 templates : organism 과 비슷하거나 더 많은 컴포넌트 또는 기능들이 있는 단위이며, 주로 화면에서 하나의 영역을 구성하는 경우에 사용된다 (예:검색 영역) pages : 화면 개발단위로 여기에서 template 이하의 컴포넌트들을 불러서 개발

b. Atomic Design 적용한 폴더 구조

• atoms : 버튼, 체크박스, div, radio 박스, span, textarea 등

import styled, {css} from styled-component #사용

• cmm : common.js → COMPS_KEY 등 핵심 선언
• commonComp : 서버통신등 라이브러니(공통 컴포넌트)
• containers : Layout 및 Route

  예) gnbLayout.js
      compsKey + Cmn.getNewCompsKey(this, ‘GnbLayout’): 반드시 넣어야 함
  

      render 밑에 <DivAtom compsKey={this.compsKey} args= store={store} sort={‘box’} >

• molecules : selectBox, 버튼, 체크박스 등
• organisms : 테이블, 로그인 등
• pages : 화면
• stores : 화면 상태 → page별로 상태를 관리한다
• styles : styled component에서 사용 할 css를 정의(주로 atom단위로 생성됨) test코드는 시각적인 효과일 뿐 실제로 사용되지 않음 _base등 언더바로 시작하는 변수는 클래스 내부에서만 사용하는 용도 default는 자주 사용되는 스타일을 선언한 것으로 특별한 설정이 없을 시 기본으로 사용된다 key_value 구조의 변수는 커스텀 스타일을 지정한 객체로 개발자가 [Cmm.CUSTOM_SC]: {key: value} 형식으로 불러서 사용할 수 있으며 이때 default 객체는 사용되지 않는다

  예) UlAtom UlStyle

• test코드는 시각적으로 보기 좋게..
• _base : 전체 적용시
• default : 기본 적용 되는 것 (백틱) → 예) 일반스트링, ${자바스크립트문법}
• customs style 적용 :
• 자주 사용되는 다른 스타일은 key_value 구조로 변수명을 작성 예) type_menu
• 정말로 1군데 만 사용 하는 곳 → 예) searchContentTemplate.js ┖ 예) args=}, args=}

• 기타

template : //* → 예) 설계자 주석 리액트 순수 코드로 개발해서 꽃아넣어도 돌아가는데 문제 없다. Data는 페이지 단위로, 공통으로 쓰는 BaseStore, PopupStore는 따로 있는데..page 단위로 Store를만들기로 했음. → 메뉴하나당 store는 하나임

Mobx Store는 index.js에 다 선언을 해주어야 함. rootLayout.js : 브라우저 전체 화면 Atom.js는 args=style을 입히면 되지만, 그 위에 있는거에서는 여러 개가 묶여 있어서 그렇게 줄수가 없고 tableAttr:{STYLE:{}}

상위 Component에서 하위 Component로 값을 내리는 방법이 2가지 있음

① Mobx Store를 통해서 전달하는 방법 → store에 param으로 지정해서 내려주는 것은 저 멀리까지 감

store는 끝까지 상속을 받음으로..중간단계에 Component도 param을 사용하고 상위도 param을 사용하면 겹쳐짐으로, 중간단계(Molecule, Organizm, Template)는 최대한 arg를 사용해야 함. Component가 로드가 완료되었을 때 DidMount가 됨 → 그 순서가 제일 마지막 것 부터임. Page → Organizm → Molecular → Atom 제일 마지막 Component부터 DidMount가 됨

예전 Javascript에서 onload 될때 실행되는 함수, React는 따로 없어서 onload = () => { 함수를 props로 던짐 예가 실행되는 시점이 이해가 되었다면, DidMount가 내 바로 자식이 DidMount되지 직전에 되니까, param를 onload에 넣어놓았음..store를 param을 계속 업어치니까, 마지막에 page단위로 Cmm.getParam을 불르는데 이때 arg까지 같이 부름

② arg를 통해서 전달하는 방법 → 바로 밑에만 전달됨

compsKey : Component들의 Key → 내부모로부터 나한테까지 오는 모든 route가 다 기록되어 있음. 예) gnbLayout.js compsKey + Cmn.getNewCompsKey(this, ‘GnbLayout’): 반드시 넣어야 함 render 밑에 <DivAtom compsKey={this.compsKey} args= store={store} sort={‘box’} > 여러 개의 button중에서 찾아가는 것도 필요함 그게 sort={0} Sort 용도 : 현재 Component에서 동일한 자식 Component가 2번 이상 사용될 때 sort={0} {1} {‘deleteButton’} 구별해서 사용함 크롬 개발자 도구 Component의 구별은 _, sort구별은 ‘$’ 로 함. Cmn.getChildKey가 상위 부모 Component의 경로를 다 붙어서 줌 [Cmn.getChildKey(this, ‘_ListOrganizm$0’)]: { }

Route를 Page쪽에서만 쓰게 했음. Content만.. 변하게끔… ContentRoute.js baseStore는 백엔드랑 통신할 때 사용하기 위해 사용함. sampleListStore.js 필수 영역은 store만들 때 필수로 넣어서 개발 해야 함. Store에 객체는 2개가 있음, data와 param임, Param은 arg를 대체할수 있는 애(즉 저 멀리까지 던질수 있는 것) → 화면하고 관련된 애들은………param에 들어감. Data는 하드코드이거나 자료를 조회올 때 가져오는 것 ds_cond, ds_list Data = {}; 성능 이슈가 있음

얕은 비교 vs 깊은 비교

얕은 비교를 통해서 달라졌을때만 화면에 rendering을 함.

구조분해할당을 하면 복사를 함.
this.data = { …this.data }; Data = {ds_cond:[aaa:1]};

WillUnmount에서 Will Unmout전, Did Unmout 후 Ds_cond = {aaa:1}; Aaa =1;

어떤 것을 개발해도, 그 화면을 모든것을하고 떠날때에는 reset을 호출해야 함. refreshData() → 직접 값 변경하고 setData하지 말고..refresh함.

Didmount는 onload함수 호출, WillUnmout는 꼭 page단에서만. Arg= → 자식중에 1놈에만 실행 시킴

<body onload=’reload’ → componentDidMount는 onload처럼 작동을 하지 않음 내 자식의 componentDidMount에 넣으면 onload처럼 작동함. 자식 componentDidMount() { This.props.arg.onload(); // arg는 한번만 내려감. Cmn.doOnload(this);

Cmm.appendStore( data와 param넣을 때 이런 명령어를 사용하여 넣어야 함) Append 해야 함.

Param
{
	 A:1,
	B:3
}
Param
{
	A;1,
C:1
}
Arg 
{
	C:1,
	B:2
}
# A,b,c   B를 3으로 인식함

Page에서는 html 태그를 맘대로 사용해도 됨…왜냐면 따로 불러사용하는곳이 없음 예) colgroup은 그냥 사용함. Atom.js에 className={this.compsKey} //* 필수 : 컴포넌트 추적을 위해 className에 compsKey문자열을 추가한다 함수영역에서는 모든 자바스크립를 쓸수 있지만, render() { return 영역은 3항 연산자만 쓸수 있다. onclick={(e)=>()} 미리 집어 넣지안으면 안되다 value={null} 안되는경우도 있음 value={‘’} Cmn.getParamsAll(this. 모든 성능이슈는 render가 소스가 길면 길수록 오래 걸린다.

Reference

• 블로그
  1. 리액트 반응형모듈 사용하기
  2. 리액트 다국어 지원하기
  3. 벨로퍼트 Mobx
  4. mobx-처음-시작해보기
  5. Mobx : Hooks와 함께 사용하기
  6. 함수형 컴포넌트에서 Mobx사용하기
  7. React Hooks + Mobx예제 - 수퍼마켓 구현하기
  8. React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개
  9. mobx 비동기 처리 예제로 알아보기
  10. 공통 컴포넌트 만들기