직장에서 Vue 사용하고 있습니다.
일부 블로그나 기사에서 “React→Vue는 힘들지 않지만, Vue→React는 힘들다.”라고 말하는 것을 보았습니다.
거기서
①핸즈온으로 체험해 본다
②왜 고생하는지
라는 2점을 정리해 보았습니다.
(React는 초보자 레벨이므로 오류가 있으면 지적하십시오)

①핸즈온으로 체험해 본다

· 앱 도입
· 구성 요소 준비, 호출

node.js가 설치되어 있어야 합니다.
그 주변의 환경 만들기는 할애합니다.
그건 그렇고, 나는 node -v12.17.0입니다.

앱 만들기

npx create-react-app sample-pj(sample-pjはアプリケーション名なので任意）

잠시 시간이 걸립니다.
내용은 이런 느낌.


앱 시작

cd sample-pj　（アプリの階層に入る）
npm start　（アプリケーションをローカルでスタート。3000番で立ち上がります。）

이런 화면이 나오면 도입은 되어 있습니다.


구성요소
src 폴더 아래에 components 폴더를 만듭니다.
컴포넌트는 여기에 만들어 간다.
이런 느낌.


Sample.js를 다음과 같이 편집.

Sample.js

import React from 'react';

// "hello world!!"を返す関数ということ
const Sample = () => {
  return (
    <div>
      <h1>hello world!!</h1>
    </div>
  );
};

export default Sample;

App.js를 편집하여 Sample.js를 호출합니다.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
// Sampleコンポーネントをインポート
import Sample from './components/Sample';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        //Sampleコンポーネントを呼び出す
        <Sample />
      </header>
    </div>
  );
}

export default App;

Sample 컴퍼넌트를 호출할 수 있습니다.


구성 요소를 늘려보십시오.
App.js를 편집하여 Button.js를 호출합니다.
Button.js는 나중에 만든다.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Sample from './components/Sample';
// Buttonコンポーネントをインポート
import Button from './components/Button';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Sample />
        // Buttonコンポーネントを呼び出す。ButtonNameというプロパティを引数に渡す。
        <Button ButtonName="Click Button" />
      </header>
    </div>
  );
}

export default App;

Button.js를 만듭니다.

Button.js

import React from 'react';

const Button = (props) => {
　// イベント処理を定義する。
  const clickEvent = () => {
    // プロパティのButtonNameを受け取って、alertの中身として表示する。
    alert(props.ButtonName);
  };

  return (
    <div>
      // Clickイベントを持たせる。
      <button onClick={clickEvent}>Click</button>
    </div>
  );
};

export default Button;

이제 한번 더 컴포넌트를 추가한다.
CalculateButton.js를 만듭니다.

CalculateButton.js

// useStateはReactのHooksという割と新しめな機能の一部で状態管理が以前よりも容易になった
// 今までとどう変わったかは　https://ja.reactjs.org/docs/hooks-state.html を参照
import React, { useState } from 'react';

const CalculateButton = (props) => {
  const [count, setCount] = useState(2);

  return (
    <div>
      <button onClick={() => setCount(count * 2)}>Click</button>
      {count}
    </div>
  );
};

export default CalculateButton;

App.js를 편집하여 CalculateButton.js를 호출합니다.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Sample from './components/Sample';
import Button from './components/Button';
// CalculateButtonコンポーネントをインポート
import CalculateButton from './components/CalculateButton';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Sample />
        <Button ButtonName="Click Button" />
        // CalculateButtonコンポーネントを呼び出す。
        <CalculateButton />
      </header>
    </div>
  );
}

export default App;

클릭할 때마다 2배가 된다.


이 기사에서는 hooks에 대한 설명은 하지 않지만 다음과 같은 기능이 있습니다.
· 기본 후크
useState => Stateful 값과 그것을 업데이트하는 함수를 반환합니다.
useEffect => useEffect에 전달 된 함수는 렌더링 결과가 화면에 반영된 후에 작동합니다. 디폴트에서는 부작용 함수는 렌더가 종료한 후에 매번 동작하지만, 특정의 값이 변화했을 때만 동작시키도록 할 수도 있다.
useContext => 등장할 때까지는 컴퍼넌트를 넘은 데이터 전달에는 버킷 릴레이 방식으로 실시하고 있었지만(부모→자식→자식의 경우, 매회 데이터를 건네주고 있었다), 그렇지 않고 글로벌 변수와 같이 취급할 수 있도록(듯이) 해주는 우수한 녀석.
· 추가 후크
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
※ 상기는 React의 공식에서 인용하거나 씹은 메모. 자세한 내용은 공식 문서을 참조하십시오.
다른 기사에서 Hooks에 대해서도 설명할 수 있으면. . .

②왜 고생하는지

현시점에서 말할 수 있는 것은, JSX의 존재일지도 모른다.
vue-router나 composition api 등, Vue.js를 어느 정도 이해하고 있다면, React로의 이행은 거기까지 스트레스가 아니다고 생각한다.

아직 React를 만지고 싶기 때문에,
앞으로 한층 더 심호리 해 보고 감상을 정리해 보고 싶다.
이번에는 여기까지!