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

134

저는 현재 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>
javascript  reactjs  react-native  react-hooks 
— 헤마 드리 다사리
소스
useState구현 방법을 이해하기 위해 소스 코드를 살펴볼 수도 있습니다 . 다음은 버전 16.9 의 정의 입니다.
— chemturion 19:51에

답변:

148

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에 답변하는 섹션이 있습니다 .

— 에마누엘 듀란
소스
2
JavaScript가 기술적으로 튜플 데이터 유형을 가지고 있지 않다는 점을 제외하고 좋은 비유
— goonerify
음, 해체 된 할당은 tuple stackoverflow.com/a/4513061/6335029
— NaveenDA
후크는 비동기입니까? 를 사용할 때 나중에 직접 setSomething사용해 something보면 이전 값이 여전히 남아있는 것 같습니다.
— Byron Coetsee
51

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은 공식 문서 를 참조하십시오 .

— Loelsonk
소스
2
예제에서 매개 변수로 함수를 추가해 주셔서 감사합니다.
— Juni Brosas
15

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>
   );
 }
스 니펫 확장

— Jan Ciołek
소스
이것은 받아 들여진 대답이어야합니다. 간결하고 명확하며 외부 참조가 좋습니다.
— varun
8

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

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

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

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

— Codejockie
소스
7

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>
스 니펫 확장

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

친애하는

— 게코
소스
7

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

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

— 무하마드 샤힘
소스
5

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

— Asif vora
소스
5

감사합니다 loelsonk, 내가 그렇게 했어

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )
스 니펫 확장

— Yanov
소스
2

useState는 기능적 구성 요소에 상태를 추가 할 수있는 후크입니다. 상태 속성의 초기 값인 인수를 받아 상태 속성의 현재 값과 해당 상태 속성을 업데이트 할 수있는 메서드를 반환합니다.
다음은 간단한 예입니다.
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}

useState는이 경우 0 인 상태 변수의 초기 값을 받아들이고 값 쌍을 반환합니다. 현재 상태 값을 count라고하고 상태 변수를 업데이트 할 수있는 메서드를 setCount라고합니다.

— Abhishek Kumar
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.