기본 반응 - useState 및 Prop 드릴링

이 기사에서는 React의 핵심 기능 중 일부에 대해 설명합니다. 간단한 애플리케이션(색상 선택기)을 만들어 React 내에서 몇 가지 개념을 파악할 수 있었습니다. 이 기사에서는 앱이 어떻게 만들어졌는지 설명하여 개념을 설명합니다.

이 기사에서 논의할 네 가지 개념이 있습니다.

React 기능 구성 요소

useState 후크

제어 입력

지주 드릴링

기능적 구성 요소 반응

Modern React는 기능적 구성 요소를 사용합니다. 이 색상 선택기 애플리케이션을 만들 때 App.js 기본 구성 요소로 가져오는 두 가지 구성 요소가 사용됩니다. 이러한 구성 요소는 다음과 같습니다.

상자 구성 요소

입력 구성 요소

// The App.js main component

import Box from "./Box";
import Input from "./Input";

function App() {
  return (
    <div className="App">
      <Box />
      <Input />
    </div>
  );
}

export default App;

// The Input component

const Input = () => {
  return <input autoFocus placeholder="Enter color here" />;
};

export default Input;

// The Box component

const Box = () => {

  return (
    <div>
      <div style={
          margin:'auto',
          width:'500px',
          height:'100px',
          border:'1px solid #000',
          textAlign: 'center',
          backgroundColor: green
      }></div>

    </div>

  )

};

export default Box;

Box 구성 요소의 기본 색상은 녹색으로 설정되어 있습니다. 다음 섹션에서 배경색을 하드코딩하는 것을 피하기 위해 useState 후크를 사용할 것입니다.

useState 후크

useState 후크를 사용하여 초기 색상을 공백으로 설정합니다. 아이디어는 색상을 설정하기 위해 사용자로부터 입력을 받는 것입니다. 사용자 입력은 다음 섹션에서 상자의 색상을 변경하는 데 사용됩니다.

import Box from "./Box";
import Input from "./Input";

import React, { useState } from "react";

function App() {
  const [color, setColor] = useState("");

  return (
    <div className="App">
      <Box />
      <Input />
    </div>
  );
}

export default App;

제어된 입력 및 소품 드릴링

useState 후크 및 onChange 함수는 앱에서 부모 구성 요소 역할을 하는 기본 App.js 구성 요소에 작성됩니다. 이러한 속성을 하위 구성 요소로 드릴다운합니다. 이런 식으로 Box 및 Input 구성 요소는 useState 후크 및 onChange 함수를 사용할 수 있습니다.

또한 onChange 함수가 수행하는 작업에 주목하십시오. 이벤트에서 값을 가져오고 후크를 사용하여 색상 값을 변경합니다. 또한 사용자 입력을 사용하여 이벤트 값을 설정합니다. 입력 값도 후크인 색상으로 설정됩니다. 이렇게 하면 입력이 제어된 입력이 됩니다.

import Box from "./Box";
import Input from "./Input";

import React, { useState } from "react";

function App() {
  const [color, setColor] = useState("");

  const onChange = (e) => {
    setColor(e.target.value);
  };

  return (
    <div className="App">
      <Box color={color} />
      <Input onChange={onChange} color={color} />
    </div>
  );
}

export default App;

const Input = ({ onChange, color }) => {
  return (
    <input
      autoFocus
      onChange={onChange}
      placeholder="Enter color here"
      value={color}
    />
  );
};

export default Input;

const Box = ({color}) => {


  return (
    <div>
      <div style={
          margin:'auto',
          width:'500px',
          height:'100px',
          border:'1px solid #000',
          textAlign: 'center',
          backgroundColor: color
      }>{color?color:"This is empty"}</div>

    </div>

  )

};

export default Box;