[javascript] React에서 useState ()는 무엇입니까?

Program / 글쓴이

저는 현재 React에서 후크 개념을 배우고 있으며 아래 예제를 이해하려고 노력하고 있습니다.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

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

위의 예제는 핸들러 함수 매개 변수 자체에서 카운터를 증가시킵니다. 이벤트 핸들러 함수 내에서 카운트 값을 수정하려면 어떻게해야합니까?

아래 예를 고려하십시오.

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>

답변

React 후크 는 state클래스를 사용하지 않고도 반응의 핵심 기능에 액세스 할 수있는 새로운 방법 (아직 개발 중) 입니다. 예를 들어 onClickprop에 직접 지정하지 않고 핸들러 함수에서 카운터를 직접 증가시키려는 경우 , 다음과 같이 할 수 있습니다.

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

및 onClick :

<button onClick={setCount}>
    Click me
</button>

이 줄에서 무슨 일이 일어나고 있는지 빠르게 설명하겠습니다.

const [count, setCounter] = useState(0);

useState(0)첫 번째 매개 변수 count가 카운터의 현재 상태이고 setCounter카운터의 상태를 업데이트 할 수있는 메서드 인 튜플을 반환합니다 . 이 setCounter메서드를 사용하여 count모든 위치 의 상태를 업데이트 할 수 있습니다 .이 경우에는 setCount더 많은 작업을 수행 할 수 있는 함수 내부에서 사용합니다 . 후크에 대한 아이디어는 코드를 더 기능적으로 유지하고 원하지 않거나 필요하지 않은 경우 클래스 기반 구성 요소를 피할 수 있다는 것 입니다.

나는 여러 예제와 함께 후크에 대한 완전한 기사를 쓴 같은 (카운터 포함) codepen이 , 내가 사용했다 useState, useEffect, useContext, 및 사용자 정의 후크 . 이 답변에서 후크가 작동하는 방법에 대해 더 자세히 알아볼 수 있지만 문서는 상태 후크 및 기타 후크를 자세히 설명하는 매우 좋은 작업을 수행합니다 .

업데이트 : 후크는 더 이상 제안이 아닙니다. 버전 16.8 이후로 이제 사용할 수 있습니다. React의 사이트에 일부 FAQ에 답변하는 섹션이 있습니다 .

답변

useState0.16.7버전 에서 사용 가능한 내장 반응 후크 중 하나입니다 .

useState기능 구성 요소 내부에서만 사용해야합니다. useState내부 상태가 필요하고 수명주기 메서드와 같은 더 복잡한 논리를 구현할 필요가없는 경우입니다.

const [state, setState] = useState(initialState);

상태 저장 값과이를 업데이트하는 함수를 반환합니다.

초기 렌더링 중에 반환 된 상태 (상태)는 첫 번째 인수 (initialState)로 전달 된 값과 동일합니다.

setState 함수는 상태를 업데이트하는 데 사용됩니다. 새 상태 값을 받아들이고 구성 요소의 다시 렌더링을 대기열에 추가합니다.

유의하시기 바랍니다 그 useState상태 업데이트를위한 후크 콜백을 다르게 동작을 구성 요소보다 this.setState. 차이점을 보여주기 위해 두 가지 예를 준비했습니다.

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };

  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

스 니펫 확장

setUserInfo콜백을 사용 하면 새로운 객체가 생성 됩니다. lastName키 값 을 잃었습니다 . 내부에서 함수를 전달할 수 있도록 수정했습니다 useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

예를보십시오 :

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

스 니펫 확장

클래스 구성 요소에있는 setState 메서드와 달리 useState는 업데이트 개체를 자동으로 병합하지 않습니다. 함수 업데이트 양식을 객체 확산 구문과 결합하여이 동작을 복제 할 수 있습니다.

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

자세한 내용 useState은 공식 문서 를 참조하십시오 .

답변

useState후크 의 구문 은 간단합니다.

const [value, setValue] = useState(defaultValue)

이 구문에 익숙하지 않은 경우 여기 로 이동 하십시오 .

문서 를 읽는 것이 좋습니다 . 적절한 양의 예제와 함께 훌륭한 설명이 있습니다.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)

   // decrement
   // setCount(count -1)

   // anything
   // setCount(0)
  }


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

스 니펫 확장

답변

useStateReact v16.8.0에서 사용할 수있는 후크 중 하나입니다. 기본적으로 비 상태 / 기능적 구성 요소를 자체 상태를 가질 수있는 구성 요소로 바꿀 수 있습니다.

매우 기본적인 수준에서 다음과 같이 사용됩니다.

const [isLoading, setLoading] = useState(true);

그러면 setLoading부울 값 전달 을 호출 할 수 있습니다 . “상태 저장”기능 구성 요소를 갖는 멋진 방법입니다.

답변

useState()React 후크입니다. 후크를 사용하면 함수 구성 요소 내에서 상태 및 변경 가능성을 사용할 수 있습니다.

클래스 내에서 후크를 사용할 수는 없지만 클래스 구성 요소를 함수 1로 래핑하고 후크를 사용할 수 있습니다. 이것은 클래스에서 함수 형태로 구성 요소를 마이그레이션하는 데 유용한 도구입니다. 다음은 완전한 예입니다.

이 예에서는 카운터 구성 요소를 사용합니다. 이거 야:

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

  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }

  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

스 니펫 확장

카운트 상태가있는 간단한 클래스 구성 요소이며 상태 업데이트는 메서드에 의해 수행됩니다. 이것은 클래스 구성 요소에서 매우 일반적인 패턴입니다. 첫 번째는 모든 속성을 래핑 된 구성 요소에 위임하는 동일한 이름의 함수 구성 요소로 래핑하는 것입니다. 또한 함수 반환에서 래핑 된 구성 요소를 렌더링해야합니다. 여기있어:

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

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

스 니펫 확장

이것은 동일한 동작, 동일한 이름 및 동일한 속성을 가진 정확히 동일한 구성 요소입니다. 이제 계산 상태를 함수 구성 요소로 들어 올립니다. 이것이 진행되는 방식입니다.

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

스 니펫 확장

메서드 inc는 여전히 존재하며, 누구에게도 해를 끼치 지 않을 것입니다. 사실은 죽은 코드입니다. 이것이 아이디어입니다. 상태를 계속 올리십시오. 완료되면 클래스 구성 요소를 제거 할 수 있습니다.

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

스 니펫 확장

이렇게하면 클래스 구성 요소 내에서 후크를 사용할 수 있지만이 예제에서와 같이 마이그레이션하는 경우를 제외하고는 사용하지 않는 것이 좋습니다. 함수와 클래스 구성 요소를 혼합하면 상태 관리가 엉망이됩니다. 이게 도움이 되길 바란다

친애하는

답변

useState ()는 기능적 구성 요소에서 상태를 사용할 수 있도록하는 내장 React 후크의 예입니다. React 16.7 이전에는 불가능했습니다.

useState 함수는 반응 패키지에서 가져올 수있는 내장 후크입니다. 기능 구성 요소에 상태를 추가 할 수 있습니다. 함수 구성 요소 내에서 useState 후크를 사용하면 클래스 구성 요소로 전환하지 않고도 상태를 만들 수 있습니다.

답변

후크는 React v16.7.0-alpha useState“후크” 의 새로운 기능입니다 . useState()any 변수의 기본값을 설정하고 함수 구성 요소 (PureComponent 함수)에서 관리합니다. ex : const [count, setCount] = useState(0);계수 0의 기본 값을 설정 및 유 사용 setCount에 increment또는 decrement값. onClick={() => setCount(count + 1)}카운트 값을 증가시킵니다. 문서