Hook 상태관리 useState
useState
useState
는 state
를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.
useState
const [state, setState] = useState(initialState);
상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state
)는 첫 번째 전달된 인자(initialState
)의 값과 같습니다.
setState
함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.
setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);
다음 리렌더링 시에 useState
를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 됩니다.
-
Example Code
// 클래스형 컴포넌트 class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0, ismodalActive: false, }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); } }
// 함수 컴포넌트 function Example() { // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); const [isModalActive, setIsModalActive] = useState(false); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> <button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button> </div> ); }
// 안 좋은 예시 const [state, setState] = useState({ color: "blue", isActive: true, name: "wecode". password: "hooks" })
Author And Source
이 문제에 관하여(Hook 상태관리 useState), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gunu/Hooks-State-관리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)