안녕하세요!
여러분들 주말 잘 보내셨나요?
저는 그냥 그럭저럭 잘 보냈습니다..ㅎ
참 많은 생각들이 드는 요즘이네요!
못 하는 것들이 많아지면서 내가 할 수 있는 것들까지는 놓치지 말자 라는 생각에 요즘은 리액트에 대해 다시 공부 하고 있답니다..!ㅎ
그래서 다시 적어보는 useState 지금 바로 시작합니다!
useState란?
자바스크립트에서 이용하는 함수를 리액트에서 더욱 간단하게 만들 수 있는 코드라고 생각하시면 될 것 같습니다
내가 바꾸고 싶은 옵션들을 쉽게 초기값을 만들고 그 옵션을 내가 주는 조건에 변화 시키고 하는 아주 리액트에 뺄 수 없는 기술이랍니다 :)
어떻게 사용하는데요?
네 보통은
내가 쓰고자 하는 함수 안에
const [number, setNumber] = useState(0);이런 식으로 선언을 하게 됩니다
(물론 최상단에 import는 무조건 해주셔야 됩니다!)
위의 코드를 잠깐 쉽게 해석하자면
number는 초기값이고 setNumber는 초기값을 바탕으로 초기값을 변화시킬 때 사용한답니다
(이 때 단어 이름은 편하게 적어도 되지만 set은 꼭 붙여주셔야합니다!)
그래서 저 코드를 다시보면 초기값이 0인 number를 setNumber 이름으로 변경할 준비가 되어있어!
라는 뜻입니다
<div>숫자가 올라가요!: {number}</div>
<button onClick = {() => {
setNumber(number + 1);
}}>
</button>
그리고 이렇게 setNumber를 사용하여 간단하게 카운트가 올라가는 버튼을 만들 수 있습니다
그러면 해당 버튼을 클릭시 number의 숫자를 올릴 수 있겠죠?
number는 setNumber를 통해서 초기값에 + 1을 해주고 있기 때문에 숫자가 올라가요! 옆에 숫자는 누를 때 마다 올라가고 있겠죠
그래서 이걸 배치 업데이트 라고 합니다
그리고!!
<button onClick = {() => {
setNumber((currentNumber) => {
return currentNumber + 1;
});
}}>
</button>이렇게도 표현할 수 있습니다!
이거는 함수형 업데이트 라고 부른답니다
함수형 업데이트 보다 배치 업데이트를 많이 사용하는 것 같기 때문에!
배치 업데이트를 더 공부를 해서 프로젝트에 적용해보시는 것이 좋을 것 같습니다
네! 오늘은 간단하게 useState에 대해 알아보았는데요
어떠신가요? 조금 어려우신가요? 네 물론 저도 아직 어렵습니다...ㅎ
하지만 계속 사용하다보면 익숙해서 그냥 주르르르 나오게 될 것 같습니다
조금 더 쉽게 정리하면 useState는 그냥 무언가 변화될 때 사용한다 라고 생각하시면 편할 것 같습니다
네 오늘의 포스팅은 여기서 마치도록하구요!
요즘 날씨가 갑자기 추워졌는데 항상 단단히 입으셔서 감기 조심하시구요
그럼 우리는 또 행복하자구요!!
