VueJS 개발자의 React Jumpstart(섹션 1)

네가 이곳에 온 것은 아마도 네가 VueJS 개발자이기 때문일 것이다. 최근에 직장을 옮겼기 때문일 것이다. 너의 새로운 직장에서 React를 사용하거나 현재의 사장이 React에서 프로젝트를 완성하기를 원하거나 네가 스스로 공부하고 싶어서일 것이다.나는 네가 이미 적당한 문장을 찾았다고 기쁘게 너에게 말했다. (단지 궁금할 뿐이다. 너는 어떻게 이 문장을 찾았니? 너는 아래에 평론을 남길 수 있니?)Vue는 첫 번째 단일 페이지 애플리케이션 라이브러리입니다.비록 비 ES6 배경에서 왔더라도 학습은 매우 쉽다. 나는 곧 구성 요소 기반의 인코딩의 즐거움을 배웠다.Vue가 나에게 약간의 위안을 준 후에, 나는 React를 배우기로 결정하고, 즉시 그것을 사랑하게 되었다.좋은 소식은 구성 요소 기반의 체계 구조를 사용하는 라이브러리에 대해 알게 되면 같은 구조를 사용하는 다른 라이브러리로 옮기기 어렵지 않다는 것이다.
본문을 쓸 때, 나는 이것이 네 부분 중의 첫 부분이라고 생각했다.제1부분, 이 부분은 기본 지식과 관련된다.두 번째 부분에서는 목록을 표시하는 등 SPA를 작성할 때 직면하는 더 흔한 작업들을 살펴보겠습니다.다음 부분에서는 공유기와 내비게이션을 토론하고, 마지막 부분에서는 우리의 맞춤형 구성 요소를 소개할 것이다.
하지만 내가 시작하기 전에 가설을 만들어야 해-

명령행/터미널 도구를 사용하여 Vue 및 React 프로젝트를 생성합니다.그러니 Vue Cli와create-react-app를 사용해야 한다.프로젝트를 만드는 방법에 대한 설명이 그들의 사이트에 있습니다.

대부분의 경우 ES6 문법과 개념을 잘 알고 있는데 주로 모듈, 내보내기, 가져오기와 클래스입니다.화살표 기능도 있어요.

모듈, 클래스 및 함수
먼저 Vue와 React 사이의 유사성을 파악합니다.둘 다 구성 요소 - 코드의 재사용 가능한 부분, 다른 부분을 삽입할 수 있으며 거의 HTML 태그로 표현될 수 있습니다.일반적으로 App이라고 하는 엔트리 포인트가 있습니다.vue 또는 응용 프로그램js.그러나 Vue에서는 모듈을 기반으로 하고 React에서는 클래스 또는 함수를 기반으로 하여 어셈블리를 처리하는 방식이 다릅니다.다음은 Vue에서 일반적인 Hello World 구성 요소를 작성하는 방법입니다.

<!--App.vue-->
<template>
  <div>
    Hello World!
  </div>
</template>

<script>
  export default {
    //stuffs and things
  }
</script>

이것은 React(기능 구성 요소)의 등가물이다.

//App.js
import React from 'react'

function App() {
  return (
    <div>
      Hello World!
    </div>
  )
}

export default App;

화살표 함수

//App.js
const App = () => (
  <div>
    Hello World!
  </div>
)

React는 JSX로 작성된 것으로 JSX는 태그에 있는 HTML과 매우 비슷해 보이는 언어로 자바스크립트를 내장하는 기능을 가지고 있다.구성 요소가 하는 일은 JSX (레이아웃과 JavaScript 코드의 조합) 를 되돌려줍니다. 이 JSX는 화면의 적당한 위치에서 React 요소로 나타납니다.

While React allows both class and function components, the latter results in much cleaner and more readable code. Function components used to have the disadvantage of being stateless, but that has been mitigated with React hooks (explained below). This post will focus solely on function components. Maybe I'll edit this post someday to include class components, when I have more time.

프레젠테이션
상태는 어셈블리가 있는 상태입니다.일반적으로 이것은 한 그룹의 키 값이 맞다는 것을 의미하며, 이것은 페이지의 각 부분에 표시된 값이나 일부 요소가 가지고 있는 속성을 결정한다.Vue에서는 상태를 data 함수에 저장합니다.다음은 하나의 예-

<!--template code above this, omitted for clarity-->
<script>
export default {
  data() {
    return {
      name: "",
      loadComplete: false
    }
  }
}
</script>

2018년 10월 이전에는 리액트의 클래스 구성 요소만 자체 상태를 가질 수 있었다.그러나 React-Conf에서 개발자는'React-Hooks'라는 매우 유용한 것들을 도입했다.Vue의 Lifecycle Connect(mounted, updated 등을 알 수 있습니다.React 갈고리는 비슷한 방식으로 작동하지만 함수 구성 요소에 상태를 포함하는 데도 도움이 됩니다.이를 위해, 우리는 useState라는 갈고리를 사용해야 한다.이것은 위에서 설명한 것과 같은 Vue 구성 요소가 React 기능 구성 요소로 어떻게 전환되는지 보여주는 방식입니다.

import React, {useState} from 'react'

const App = () => {
  const [name, setName] = useState("");
  const [loadComplete, setLoadComplete] = useState(false);

  return (
    {/* JSX here */}
    {/* btw, this is also how you put a comment inside JSX */}
  )
}

위에서 설명한 바와 같이 React는 불변 상태 키를 식별하기 위해 해구 문법을 사용하고 함수를 사용하여 값을 설정합니다.입력 useState 의 매개 변수는 키가 유지해야 하는 초기 값입니다.예를 들어, loadComplete의 경우 초기 값은 false입니다.(이 상태 값을 설정하고 가져오는 방법의 예)

우리 처음부터 아주 좋은 시작으로...
대부분의 프로그램에서 페이지를 처음 불러올 때 명령을 내리는 방법이 필요합니다.일반적으로 이 섹션에서는 API를 호출하여 데이터를 가져옵니다.Vue에서 방법mounted은 이 방면의 친구다.API를 호출하고 상태를 채우는 방법의 예는 다음과 같습니다.

export default {
  data() {
    return { name: "" }
  },

  mounted() {
    fetch('http://some.api')
    .then(r => r.json())
    .then(res => { this.name = res.data.name });
  }
}

There is an argument that server data should never be stored in state, but rather in a server cache. I've read a few articles about it, and they make good points, but for the sake of simplicity I'm just using state here.

React에서 같은 효과를 얻기 위해 우리는 다시 사용한다. 네가 알아맞혔어, 갈고리.물론 우리는 useState 갈고리가 필요하지만 useEffect라는 또 다른 갈고리를 사용할 것이다.이것은 여러 개의 매개 변수를 받아들일 수 있는 함수입니다. 첫 번째 매개 변수는 함수 블록 (보통 익명) 으로 페이지가 불러오거나 나타날 때 바로 자극됩니다.

import React, {useState, useEffect} from 'react'

const App = () => {
  const [name, setName] = useState("");

  useEffect(() => {
    fetch('http://some.api')
    .then(r => r.json())
    .then(res => { setName(res.data.name) });
  });

  return (
    {/* JSX here */}
  )
}

name의 값을 직접 설정하려고 하지 마십시오.그것은 바꿀 수 없는 것이니 이렇게 대해야 한다.)
위의 코드는 기본적으로 문제가 없지만 문제가 하나 있다.이것은 첫 번째 터치일 뿐만 아니라, 페이지의 렌더링을 터치할 때마다 터치합니다 ((useEffect. 본질적으로, 이것은 Vue의 mounted 와 updated 기능을 포함합니다.처음부터 한 번 촉발하고 한 번만 촉발하는 것을 확보하기 위해서 우리는 반드시 두 번째 파라미터를 통과해야 한다.두 번째 매개변수는 주의할 상태 목록을 포함합니다.따라서 useEffect로 정의된 첫 번째 매개 변수의 함수는 이 상태에서 값이 바뀌었을 때만 시작됩니다.우리는 이 매개 변수로 공백 그룹을 전달할 것이다.이것은 리액트에게 이것은 불을 켜고 잊어버린 처결이라고 말했다.수정된 코드는 다음과 같다

  useEffect(() => {
    fetch('http://some.api')
    .then(r => r.json())
    .then(res => { setName(res.data.name) });
  }, []);

상태 값 표시
이것은 매우 간단하기 때문에, 나는 직접 뛰어들어 당신에게 코드 세션을 보여 드리겠습니다.그것들은 각각 두 가지 예시를 포함한다. 첫 번째 예는 웹 페이지의 어느 위치에 순수한 텍스트를 표시하는 것이고, 다른 예는 어떻게 텍스트 상자에 동적 텍스트를 표시하는 것이다.자명하지 않을 것이다.
Vue:

<template>
  <div>
    <h3>Name:</h3>
    <div>{{ name }}</div>
    <input type="text" :value="name" />
  </div>
</template>

<script>
export default {
  data() {
    return { name: "" }
  }
}
</script>

반응:

const App = () => {
  const [name, setName] = useState("");

  //fetch and set name

  return (
    <div>
      <h3>Name:</h3>
      <div>{ name }</div>
      <input type="text" value={ name } />
    </div>
  )
}

React의 v모델은 등가물이 없습니다.React에서 양방향 바인딩을 지원하지 않습니다.

이벤트 바인딩
위의 예는 상태 값을 원소에 연결하는 방법을 보여 줍니다.사건을 각자의 사건 처리 프로그램에 어떻게 연결하는지 봅시다.예를 들어 Vue JS에서 "methods"부분에서 방법을 작성한 다음 @event 명령과 연결해야 합니다 -

<template>
  <div>
    <button @click="btnClicked">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    btnClicked() {
      alert('Clicked!')
    }
  }
}
</script>

React에서는 구성 요소 내부의 어느 곳에서 프로세서를 작성하고 익명 화살표 함수를 사용하여 이벤트에 연결하는 방법 부분이 없습니다.

const App = () => {
  const btnClicked = () => alert('Clicked!');

  return (
    <div>
      <button onClick={ () => btnClicked() } />
    </div>
  )
}

나는 지금 여기까지라고 생각한다.이것은 표면에 거의 닿지 않았는데, 나는 당시의 리듬이 상당히 빨랐다는 것을 인정한다.하지만 경험이 풍부한 Vue 개발자에게 반응하고 비슷한 점을 그리고 차이를 설명하기 위해 간단하게 소개하는 것이 목표입니다.나는 너희들 스스로가 더욱 깊이 파고들고 더욱 잘 공부할 수 있을 것이라고 믿는다.그들이 말한 것처럼, "일부 프로그래머가 복구할 수 없는 버그가 있고, 다른 버그는 모두 쌓여 넘친다."좋아, 나는 더 이상 멀리 가지 않겠다.너희들이 이 문장을 좋아하길 바란다. 나는 다음 편에서 너희들을 볼 것이다.
[계속]