'___'은 ReactJs에서 가장 인기 있는 훅입니까?

가장 인기 있는 후크를 공개하기 전에(비밀은 이미 공개되었습니다. 바로 useState입니다!) React 후크가 무엇이며 처음에 왜 필요한지 이해해 봅시다.

후크는 기본적으로 기능적 구성 요소에서 React 상태에 연결하는 데 도움이 되는 기능입니다. React를 처음 사용하는 경우 이 후크가 기본적으로 작성되는 코드 줄을 크게 줄이는 데 도움이 된다는 점만 알아두세요!

다음은 React 16.8(2018) 이전에 구성 요소를 작성하는 기본 방법이었던 클래스 기반 구성 요소의 예입니다(React 후크가 출시되었을 때).

옛날 방식:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

새로운 방법:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React Hooks는 React 개발자의 삶을 더 쉽게 만들었고, 따라서 React의 학습 곡선을 훨씬 덜 가파르게 만들어 인기를 높였습니다.

그리고 ReactJs에서 가장 많이 사용되는 hook은 .....

사용상태() !

간단한 언어로 useState는 반응 구성 요소에서 모든 종류의 데이터를 저장하고 사용하는 방법입니다.
위에서 useState가 카운터로 작동하는 방법의 예를 보았습니다.

useState에 대해 기억해야 할 몇 가지 사항:const [counter ,setCounter] = useState(0)

배열 분해를 사용하여 두 가지를 얻습니다. 데이터(counter)와 데이터를 설정하는 함수(setCounter).

다음과 같이 JSX 코드에서 직접 counter를 사용할 수 있습니다.

{counter} 함수를 사용하여 데이터를 다음과 같은 상태로 설정할 수 있습니다. setCounter

객체 또는 배열을 useState의 데이터로 사용할 수도 있으므로 데이터를 렌더링하는 강력한 도구가 됩니다.

다음은 useState 철갑에 대한 이해를 돕기 위한 useState()의 3가지 예입니다.

1. 색상 선택기:
상태를 사용하여 텍스트 색상을 변경합니다.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [textColor, setTextColor] = useState("");
  return (
    <div className="App">
      <h1 style={{ color: textColor }}>Hello CodeSandbox</h1>
      <button onClick={() => setTextColor("red")}>Red</button>
      <button onClick={() => setTextColor("blue")}>Blue</button>
      <button onClick={() => setTextColor("green")}>Green</button>
      <button onClick={() => setTextColor("black")}>Reset</button>
    </div>
  );
}

참조 result

2. 상태를 사용하여 목록 렌더링 및 업데이트:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const data = [
    { name: "Onkar", age: 28 },
    { name: "Tushar", age: 24 },
    { name: "Amira", age: 29 }
  ];
  const [userData, setUserData] = useState(data);
  const removeHandler = (obj) => {
    setUserData(userData.filter((person) => person !== obj));
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ul>
        {userData.map((obj) => (
          <li>
            {obj.name} is of the age {obj.age}{" "}
            <button onClick={() => removeHandler(obj)}>remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

참조 results

3. 상태를 사용하여 앱에 다크 모드 사용:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [theme, setTheme] = useState("");
  return (
    <div className="App">
      <div className={`app-container ${theme}`}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={() => setTheme("dark")}>Switch to Dark mode</button>
        <button onClick={() => setTheme("")}>Switch to Light mode</button>
      </div>
    </div>
  );
}

참조 results


이제 useState 후크가 작동하는 방식에 대한 공정한 아이디어를 얻었고 프런트엔드 개발자가 되는 초보자 여정에서 후크를 사용할 수 있기를 바랍니다!

당신은 항상 저에게 연락하실 수 있습니다!

행복한 해킹!