React의 useState()는 무엇입니까?
저는 현재 리액트에서 후크 개념을 배우고 있으며, 아래의 예를 이해하려고 합니다.
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>
리액트 훅은 다음과 같은 리액트의 핵심 기능에 액세스하기 위한 새로운 방법(아직 개발 중)입니다.state가 없습니다.onClick을 사용하다
...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...
const setCount = () => {
setCounter(count + 1);
setMoreStuff(...);
...
};
on클릭:
<button onClick={setCount}>
Click me
</button>
다음 행에서 무슨 일이 일어나고 있는지 간단히 설명하겠습니다.
const [count, setCounter] = useState(0);
useState(0)는 첫 번째 파라미터가 '태플'로 을 반환합니다.count이며, 「」는 「」입니다.setCounter카운터의 상태를 갱신할 수 있는 방법입니다., 그럼 이렇게 .setCounter countanywhere - 이 anywhere 에서 사용하고 - of of of of anywhere anywhere anywhere 。setCount훅을 사용하면 코드를 더 기능적으로 유지하고 필요하지 않은 경우 클래스 기반 컴포넌트를 회피할 수 있습니다.
이 코드펜과 같은 여러 가지 예(카운터 포함)를 사용하여 후크에 대한 완전한 기사를 작성했습니다.useState,useEffect,useContext, 및 커스텀 훅.이 답변에서 훅이 어떻게 동작하는지에 대해 자세히 설명하겠습니다만, 이 문서에서는 상태 훅 및 기타 훅에 대해 자세히 설명하고 있으므로 도움이 되었으면 합니다.
업데이트: 후크는 더 이상 제안 사항이 아닙니다.버전 16.8을 사용할 수 있게 되었기 때문에 React 사이트에는 FAQ의 일부에 대한 답변이 섹션이 있습니다.
useState는, 「1」로 할 수 있는 입니다.0.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는 업데이트개체를 자동으로 Marge하지 않습니다.함수 업데이터 폼과 오브젝트 확산 구문을 조합하여 이 동작을 복제할 수 있습니다.
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>
);
}useState()리액트 후크입니다.후크는 기능 컴포넌트 내부의 상태와 가변성을 사용할 수 있도록 합니다.
클래스 내에서는 후크를 사용할 수 없지만 클래스 컴포넌트를 함수 컴포넌트로 랩하여 후크를 사용할 수 있습니다.이 툴은 컴포넌트를 클래스에서 기능 형태로 이행하는 데 매우 적합합니다.다음으로 완전한 예를 제시하겠습니다.
이 예에서는 카운터 컴포넌트를 사용합니다.바로 이것입니다.
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 v16 . 8 . 0 」는 React v16.8.0 입니다.기본적으로 상태 저장/기능하지 않는 컴포넌트를 자체 상태를 가질 수 있는 컴포넌트로 변경할 수 있습니다.
매우 기본적인 수준에서는 다음과 같이 사용됩니다.
const [isLoading, setLoading] = useState(true);
'어울리지 않다'라고 부를 수 요.setLoading부울 값을 전달합니다.「스테이트 풀」기능 컴포넌트를 갖추는 뛰어난 방법입니다.
useState()는 기능 컴포넌트의 상태를 사용할 수 있는 내장된 React 훅의 예입니다.이것은 React 16.7 이전에는 불가능했다.
useState 함수는 리액트 패키지에서 Import할 수 있는 삽입 후크입니다.기능 컴포넌트에 상태를 추가할 수 있습니다.함수 컴포넌트 내의 useState 훅을 사용하면 클래스 컴포넌트로 전환하지 않고 상태를 작성할 수 있습니다.
고마워, 롤슨크, 그렇게 했어.
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})}/>
)은 훅의 입니다.React v16.7.0-alpha useState입니니다useState()임의의 변수의 기본값을 설정하고 함수 구성 요소(PureComponent 함수)에서 관리합니다. ex : const [count, setCount] = useState(0);을 카운트0 을 사용할 수 .그러면 사용자는 다음 명령을 사용할 수 있습니다.setCount로로 합니다.increment ★★★★★★★★★★★★★★★★★」decrement★★★★★★ 。onClick={() => setCount(count + 1)}카운트 값을 늘립니다.델 텔레폰
컴포넌트에 할 수 입니다.useState는 기능 컴포넌트에 상태를 추가할 수 있습니다.상태 속성의 초기 값인 인수를 받아들이고 상태 속성의 현재 값과 해당 상태 속성을 업데이트할 수 있는 메서드를 반환합니다.
하다
import React, { useState } from react
function HookCounter {
const [count, setCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count}</button>
</div>
)
}
useState는 상태 변수의 초기값(이 경우 0)을 받아들이고 값의 쌍을 반환합니다.스테이트의 현재 값은 count라고 불리며 스테이트 변수를 갱신할 수 있는 메서드는 setCount라고 불립니다.
으로는 ★★★★★★★★★★★★★★.React.useState(0)처럼 count ★★★★★★★★★★★★★★★★★」setCount(변경방법)count) ''' 입니다.useState는, 합니다.count.
const [count, setCount] = React.useState(0);
const [count2, setCount2] = React.useState(0);
// increments count by 1 when first button clicked
function handleClick(){
setCount(count + 1);
}
// increments count2 by 1 when second button clicked
function handleClick2(){
setCount2(count2 + 1);
}
return (
<div>
<h2>A React counter made with the useState Hook!</h2>
<p>You clicked {count} times</p>
<p>You clicked {count2} times</p>
<button onClick={handleClick}>
Click me
</button>
<button onClick={handleClick2}>
Click me2
</button>
);
Enmanuel Duran의 예를 기반으로 하지만 2개의 카운터를 표시하고 람다 함수를 일반 함수로 쓰기 때문에 이해하기 쉬운 사람도 있을 수 있습니다.
React useState는 기능 컴포넌트 내의 상태를 관리할 수 있는 React Hook입니다.
예를 들어 다음과 같습니다.
import React, { useState } from 'react'
const Example = () => {
// create the "counter" state
const [count, setCount] = useState(0)
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Count + 1
</button>
</div>
)
}
export default Example
를 사용하면 를 쉽게 할 수 .useState는 스테이트풀 기능 컴포넌트입니다.와 클래스 컴포넌트를 함께 하는 Component 및 " " " 。setState 말합니다
import React, { Component } from 'react'
class Example extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
render() {
const { count } = this.state
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={() => this.setState({ count: count + 1 })}>
Count + 1
</button>
</div>
)
}
}
export default Example
출처:
링크:
간단한 방법으로 useState를 이해합시다.
반응 코드가 있다고 가정합니다.-
index.displaces를 표시합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './components/Test.jsx'
ReactDOM.render(
<div>
<Test />
</div>
,
document.getElementById('root')
);
Test.jsx
import React from "react";
function Test() {
var x = 5;
function update() {
console.log(x);
return x++;
}
return (
<div>
<h1>{x}</h1>
<button onClick={update}>click</button>
</div>
);
}
export default Test;
이 페이지에는 5가 표시되는데, 비록 우리가 x를 업데이트하기 때문에 버튼을 클릭해서 업데이트 기능을 호출하지만, 실제로 x는 클릭할 때마다 계속 변경되지만 콘솔에서는 볼 수 있습니다.
여기서 usState는 마법처럼 작동합니다.
useState를 사용하여 Test.jsx를 실행합니다.
import React, { useState } from "react";
function Test() {
var x = 5;
const [value, setValue] = useState(x);
function update() {
setValue(value + 1);
}
return (
<div>
<h1>{value}</h1>
<button onClick={update}>click</button>
</div>
);
}
export default Test;
여기서 버튼을 클릭함으로써 값은 지속적으로 갱신됩니다.여기서 우리는 State를 사용하고 있기 때문에 하나는 현재 상태 값이고 다른 하나는 함수입니다.만약 우리가 이 함수에 어떤 값을 전달하면 그것은 쓰이지 않고 모든 장소에서 현재 상태 vlue와 현재 상태 값을 갱신할 것입니다.추가 코드
, 제가 the the의 、 in, 、 가가 、 가가 、 가 the 、 the 。useState에 따라 에는 패스하는 좋습니다.useState해 주세요.이치노
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
// passing a callback to useState to update count
<button onClick={() => setCount(count => count + 1)}>
Click me
</button>
</div>
);
}
새 상태가 이전 상태의 계산에 의존하는 경우 이 방법을 권장합니다.
useState는 기능 컴포넌트에 상태 변수를 포함할 수 있는 후크입니다.
React에는 클래스 및 기능 컴포넌트의 두 가지 컴포넌트가 있습니다.
클래스 컴포넌트는 React에서 확장되는 ES6 클래스입니다.구성 요소 및 상태 및 라이프사이클 방법을 사용할 수 있습니다.
class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ‘’
};
}
componentDidMount() {
/* ... */
}
render() {
return <div>{this.state.message}</div>;
}
}
기능 컴포넌트는 인수를 컴포넌트의 속성으로 받아들이고 유효한 JSX를 반환하는 함수입니다.
function Message(props) {
return <div>{props.message}</div>
}
// Or as an arrow function
const Message = (props) => <div>{props.message}</div>
보시다시피 상태나 라이프 사이클 방법은 없습니다.
언급URL : https://stackoverflow.com/questions/53165945/what-is-usestate-in-react
'source' 카테고리의 다른 글
| "select from" 구문을 사용하지 않고 MySQL 테이블이 존재하는지 확인하시겠습니까? (0) | 2023.01.27 |
|---|---|
| Jackson databind 열거형 대소문자를 구분하지 않음 (0) | 2023.01.27 |
| WAMP에서 MySql을 MariaDb로 대체하는 방법 (0) | 2023.01.27 |
| MARIADB: 범위에 조인된 선택 항목에는 인덱스가 사용되지 않습니다. (0) | 2023.01.27 |
| Guzle 6: 응답에 대한 json() 메서드는 없습니다. (0) | 2023.01.27 |