728x90
Hooks - useState
가장 기본적인 hook이며,
함수 컴포넌트에서 가변적인 상태를 갖게 함
카운터, Todolist
const [state, setState] = useState(초기값);
배열을 구조분해 할당으로 꺼내놓음.
함수형 업데이트
App.jsx
import { useState } from 'react';
import './App.css';
function App() {
const [number, setNumber] = useState(0);
return (
<>
<div> Number State : {number} </div>
<button
onClick={() => {
// 기존 업데이트 방법
// setNumber(number + 1);
// 함수형 업데이트
setNumber((curNum)=>{
return curNum + 1;
})
}}
>
누르면 up
</button>
</>
);
}
export default App;
기존 방식은 배치성으로 처리됨. → 모아서 같은게 3개 있으니 한번 실행됨.
함수형 업데이트는 순처적으로 처리됨.
렌더링이 잦다 ↔ 성능이 낮다.
'JavaScript > React' 카테고리의 다른 글
Redux (0) | 2023.06.08 |
---|---|
Hooks - useEffect, 의존성 배열(dependency array) (0) | 2023.06.07 |
숙련주차, GlobalStyles, Sass (0) | 2023.06.07 |
숙련주차, Styled Components ,Css-in-JS (0) | 2023.06.07 |
반복되는 Component 처리하기 (0) | 2023.06.07 |