Reactjs

React State를 사용하여 DOM 업데이트 - challenge 3

조회 319 (작성일 2019.08.02 11:02)
- 음성
- 목록

현대 프런트 엔드 JavaScript 라이브러리 / 프레임 워크의 공통된 주제는 응용 프로그램의 데이터를 관리하는 데 도움이 된다는 것입니다.

https://scotch.io/courses/10-react-challenges-beginner/use-react-state-to-update-the-dom

일단 무언가를 업데이트하면 React가 즉시 UI를 업데이트 할 수 있습니다.

React는 state라는 개념을 사용하여 데이터를 유지하고 UI를 업데이트합니다.

과제 : 양식 입력에서 데이터 업데이트

이 React challenge에서는 <input> 필드를 사용하여 데이터를 업데이트합니다.

주요 작업은 다음과 같습니다.

<input> 필드를 사용하여 텍스트를 허용하십시오.
해당 입력 필드를 기반으로 UI 업데이트
반응 상태를 사용하여 UI를 자동으로 업데이트하십시오.
양식을 사용하여 데이터 업데이트

시동 코드

시작하려면 이 CodeSandbox를 포크하십시오 : https://codesandbox.io/s/2x73k4o38n

기본 CodeSandbox는 Bulma 클래스와 기본 CSS를 사용하여 스타일이 지정됩니다. 마지막 페이지는 다음과 같습니다.

zd6cohir9tf0oefmv7ct.mp4

솔루션 : 입력 데이터 업데이트

React의 상태에서는 응용 프로그램의 다양한 부분을 다른 부분의 데이터로 업데이트 할 수 있습니다. React 16.8에서는 Hooks가 도입되어 기능 구성 요소에 React 클래스 구성 요소 함수의 기능을 사용하는 방법을 제공했습니다.

State는 응용 프로그램에서 동적 데이터를 작성하고 업데이트하는 방법을 제공합니다.

이 과제에서 우리는 useState() 훅을 사용하여 상태 변수를 생성하고 업데이트합니다.

이 과제는 다음 세 단계로 완료됩니다.

기본 데이터로 상태 변수 만들기
변수를 페이지에 전달하십시오.
상태 데이터의 업데이트를 처리하는 양식을 만듭니다.

상태 변수 만들기

이 문제를 해결하려면 name과 age를 보유하는 두 개의 state 변수가 필요합니다. 다음과 함께 App() 구성 요소의 useState() 훅을 사용하여 만듭니다.

// Import React and useState
import React, { useState } from "react";
// import other dependencies

function App() {
    // Create state variables here
  const [name, setName] = useState("Chuloo");
  const [age, setAge] = useState("38");

  return (
    <div className="App">

      // Content goes in here

    </div>
  );
}

여기서 우리는 두 개의 변수 name과 age를 생성 한 다음 각각 Chuloo와 38의 기본값을 할당했습니다. setName 및 setAge 메서드는 호출 될 때 상태 데이터를 업데이트하고 새 데이터 값을 매개 변수로 전달합니다.

변수를 페이지에 전달하십시오.

input-display의 클래스를 가진 리턴 된 JSX에서 우리는 상태 변수의 값을 표시 할 것이다. 다음과 같이하십시오.

function App() {
  const [name, setName] = useState("Chuloo");
  const [age, setAge] = useState("38");

  return (
    <div className="App">
      <div>
        <h2 className="subtitle is-4">Update Data from an input</h2>
      </div>

            // Display data from state
      <div className="input-display">
        <h3>Display Name: {name}</h3>
        <h3>Display Age: {age}</h3>
      </div>

    </div>
  );
}

현재 상태의 데이터가 표시됩니다. 기본값을 변경할 때까지 기본값이 표시됩니다.

상태 데이터 업데이트 처리

React의 <input> 요소는 입력 값이 상태를 사용하여 결정되고 업데이트 된다는 점에서 "제어 된 구성 요소"입니다. 이를 염두에 두고 입력 값을 해당 상태 데이터의 값으로 업데이트 해야 합니다.

또한 입력 요소의 값이 변경되면 해당 상태 데이터가 업데이트 됩니다. 이것은 입력 요소와 그 값을 제어하기 때문에 상태 변수를 단일 진원으로 만듭니다.

이름 입력 값을 할당하고 App()의 onChange 속성을 사용하여 모든 변경 사항을 처리합니다.

function App() {
  const [name, setName] = useState("Chuloo");
  const [age, setAge] = useState("38");

  return (
    <div className="App">

            // Display form data


      <div className="inputs">

                // Name input
        <div className="field">
          <label className="label">Name: </label>
          <input
            className="input"
            type="text"
            value={name}
            placeholder="William"
            onChange={e => setName(e.target.value)}
          />
        </div>

        // Handle Age input

      </div>
    </div>
  );
}

age도 똑같이 하십시오.

function App() {
  const [name, setName] = useState("Chuloo");
  const [age, setAge] = useState("38");

  return (
    <div className="App">

            // Form data display

      <div className="inputs">
        // Name input . . .

                // Age input
        <div className="field">
          <label className="label">Age: </label>
          <input
            type="number"
            className="input"
            placeholder="38"
            value={age}
            onChange={e => setAge(e.target.value)}
          />
        </div>
      </div>
    </div>
  );
}