Reactjs

이벤트가 있는 DOM 이동- challenge 6

조회 367 (작성일 2019.08.02 12:18)
- 음성
- 목록

요소 스타일링 또는 어떤 경우에는 React 프로젝트의 구성 요소가 필수적입니다.

때로는 JavaScript를 사용하는 응용 프로그램의 변경을 기반으로 요소의 스타일을 변경해야 합니다.

이 챌린지에서는 특정 이벤트가 발생하거나 응용 프로그램의 상태 값이 변경되면 CSS 속성을 변경합니다.

https://scotch.io/courses/10-react-challenges-beginner/dom-movement-with-events

CodePen Final: https://codesandbox.io/s/qq4xww2jzj\
CodePen Starter: https://codesandbox.io/s/k3yy75w3wo\

과제 : 박스 이동

이 문제는 버튼을 클릭 할 때마다 제공된 상자의 위치를 위쪽으로 옮길 것을 요구합니다.

이 과제의 과제는 다음과 같습니다.

변형 점의 값을 유지할 상태 변수를 만듭니다.
변형 점을 증가 시키거나 감소 시키는 이벤트를 처리합니다.
생성 된 상자에 인라인 CSS를 사용하여 변환을 바인딩합니다.

시동 코드

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

스타터 CodeSandbox에 스타일이 제공되므로 언제든지 사용할 수 있습니다.

다음은 최종 응용 프로그램의 모양입니다.

fzccrymnuqbkl748dwgm.mp4

보너스 포인트

다양한 버튼으로 여러 방향으로 상자를 이동하십시오. 마우스를 추적하는 상자를 가질 수도 있습니다.

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

힌트

transform CSS 속성과 해당 translateY 함수를 찾습니다.

해결책 : 상자를 위로 이동하십시오.

JavaScript 파일에 CSS를 작성할 수 있는 다양한 CSS-in-JS 솔루션이 있습니다. 이 React 도전 과제에서는 JavaScript를 사용하여 구성 요소의 CSS 속성 값을 업데이트합니다.

이 문제를 해결하기 위해 버튼을 클릭 할 때 제공된 상자를 위쪽으로 이동해야 합니다. 이 버튼을 클릭하면 생성 된 상태 값이 업데이트 되고 이 값은 상자의 transform CSS 속성에 전달됩니다.

translateY 함수는 2D 평면에서 상자를 이동하는 데 사용됩니다. 이 과제는 3 단계로 완료됩니다.

상태에 오프셋 값 저장.
오프셋 값을 감소 시키는 함수를 만듭니다.
오프셋 값을 상자에 바인딩하고 함수를 트리거 단추에 바인딩하십시오.

상태에 오프셋 값 저장

useState React hook은 해당 업데이트 메소드와 함께 상태 변수를 생성하는 데 사용됩니다. offsetTop의 초기 값은 300입니다.이 초기 값은 상자의 원래 위치에서 수직으로 오프셋 됩니다.

App() 구성 요소에 offsetTop이라는 상태 변수를 만들고 초기 값을 300으로 설정합니다. 다음 작업을 수행합니다.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ScotchInfoBar from './ScotchInfoBar';
import './styles.css';

function App() {
  const [offsetTop, setOffsetTop] = useState(300);

  return (
    <div className="App">
      <h1>Move the Box!</h1>

      {/_ handle the click event on this button _/}
      <button> Move Up </button>

      {/_ move this box using inline styles _/}
      <div
        className="box"
        style={{}}
      />

    </div>
  );
}

offsetTop 감소

상자를 맨 위에 더 가까이 이동하려면 offsetTop의 값을 줄이십시오. 값을 50 줄이는 함수를 만듭니다. 원하는 값을 사용할 수 있습니다. 50은 상자가 좋은 양을 움직일 수 있게 합니다. App()에서 다음을 수행하십시오.

import // ... import dependencies 

function App() {
  const [offsetTop, setOffsetTop] = useState(300);

  function moveBoxUp() {
    setOffsetTop(offsetTop - 50);
  }

  return (
    <div className="App">

            // App content goes in here

    </div>
  );
}

moveBoxUp 함수는 "위로 이동"버튼을 클릭 할 때마다 호출됩니다.

데이터를 상자 및 단추에 바인딩

이제 박스를 위로 움직일 수 있는 변형 데이터가 생겼습니다. 변형 속성을 가진 인라인 스타일과 translateY 함수를 사용하여 위쪽에서 상자를 옮기는 값을 추가하십시오. 다음과 같이하십시오.

import // ... import dependencies

function App() {
  // Component variables

  return (
    <div className="App">
      <h1>Move the Box!</h1>

      {/_ handle the click event on this button _/}
      <button> Move Up </button>

      {/_ move this box using inline styles _/}
      <div
        className="box"
        style={{
          transform: `translateY(${offsetTop}px)`
        }}
      />

      <ScotchInfoBar />
    </div>
  );
}

템플릿 리터럴을 사용하여 transformTop 변수를 transform 속성에 포함했습니다. 이렇게 하면 페이지가 300 픽셀 아래로 설정됩니다.

"위로 이동"버튼에서 onClick 이벤트 핸들러를 사용하여 버튼을 클릭 할 때마다 moveBoxUp 함수를 호출합니다. 다음과 같이하십시오.

import // ... import dependencies

    function App() {
      // Component variables

      return (
        <div className="App">
          <h1>Move the Box!</h1>

          {/_ handle the click event on this button _/}
          <button onClick={moveB}> Move Up </button>

          {/_ move this box using inline styles _/}
          <div
            className="box"
            style={{
              transform: `translateY(${offsetTop}px)`
            }}
          />

          <ScotchInfoBar />
        </div>
      );
    }

이렇게 하면 버튼을 클릭하면 오프셋의 값이 상단에서 50 픽셀 씩 줄어 듭니다.

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

yhgdzhgqh1ca5gc7ycbi.mp4