분류 Reactjs

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

컨텐츠 정보

  • 조회 319 (작성일 )

본문

현대 프런트 엔드 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() 훅을 사용하여 상태 변수를 생성하고 업데이트합니다.


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

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


상태 변수 만들기 


이 문제를 해결하려면 nameage를 보유하는 두 개의 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>
  );
}

onChange 이벤트 속성을 사용하여 상태 변수를 현재 입력 데이터로 업데이트하는 함수를 호출합니다.


마지막 페이지는 다음과 같습니다.


xhesyth2pjxfrl60ucsd.mp4 


완성 된 CodeSandbox 버전 : https://codesandbox.io/s/9451yr9lrw


결론


이 문제를 해결하기 위해 주에서 데이터를 사용하고 업데이트하는 방법을 배웠습니다. React는 후크를 사용하여 상태를 업데이트 한 후에 DOM 업데이트를 처리 할 수 ​​있습니다.