일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- ES6+
- object
- ES5+
- 선택자
- html5
- 함수
- JS
- 우아한테코톡
- 변수
- DOM
- hatso
- es6
- dev
- git
- github
- gitCLI
- JavaScript
- next.js
- learn next.js
- AI
- CSS
- array
- Python
- react
- 햇소
- This
- API
- hooks
- 최적화
- developerlife
Archives
- Today
- Total
codinghatso
useState - React Hooks 본문
useState는 state와 setState를 배열 형태로 return 해 줍니다.
const [state, setState] = useState(초기값);
- state에는 현재 상태 값이 들어있습니다.
- setState로 상태 값을 업데이트시켜줄 수 있습니다.
- setState값이 변경 될 때마다 업데이트(렌더링) 됩니다.
State값을 변경할 때 변경할 값이 이전 State값과 연관되어 있다면 콜백함수를 사용하는 게 좋습니다.
setState((prevState) => {
return newState;
})
//배열 형태는 [input, ...prevState] 스프레드 문법으로 새로운 배열을 return 하면 된다.
State의 초기값이 어떤 무거운 함수의 결괏값으로 전달될 때 콜백함수로 전달하면 초기에 한 번만 동작하게 할 수 있습니다.
useState(()=>{
return heavyWorks();
})
- useState의 초기값은 숫자 타입과 문자 타입을 가질 수 있습니다.
- const [count, setCout] = useState(0); 은 JavaScript의 "배열 구조 분해" 문법을 사용합니다.
기존의 React 버전과 Hook을 사용한 버전의 차이점
state 가져오기
클래스 컴포넌트는 this.state.count를 사용.
<p>You clicked {this.state.count} times</p>
함수 컴포넌트는 count를 직접 사용.
<p>You clicked {count} times</p>
state 갱신하기
클래스 컴포넌트는 갱신을 위해 this.setState()를 호출.
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
함수 컴포넌트는 setCount 변수를 호출.
<button onClick={() => setCount(count + 1)}>
Click me
</button>
'WEB > React' 카테고리의 다른 글
useContext - React Hooks (0) | 2023.11.03 |
---|---|
useRef - React Hooks (0) | 2023.11.01 |
useEffect - React Hooks (0) | 2023.11.01 |
React Hook이란? (0) | 2023.10.23 |
학습 체크리스트 (0) | 2023.10.20 |
Comments