useState3 [React] useState의 비동기적 동작 1. setState의 비동기적 동작 함수형 컴포넌트로 간단한 카운터를 만들었습니다. import React, {useState} from 'react'; const Counter2 = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(count+1); console.log('click'); setCount(count+1); console.log('click'); } return ( {count} + ); } export default Counter2; 실행해보기전에 동작을 예측해보자면, state의 count가 두 번 증가해서 결과적으로 버튼을 누르면 카운트가 2씩 증가할 것 같습니다. 그럼 실행해볼까요? 우선.. 2021. 12. 27. [React] Hooks - useState Hooks에서 처음으로 다뤄볼 기능은 useState였습니다. 예전에 살짝 어떤 느낌이다만, 소개했고 이번엔 그 본격적인 사용 방법을 다루려고 합니다. 1. useState useState는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다. 다음은 버튼에 따라 글자와 문자가 변하는 간단한 컴포넌트입니다. import React, {Fragment, useState} from 'react'; const ColorChanger = () => { const [colorText, setColorText] = useState('검정'); const [color, setColor] = useState('black.. 2021. 11. 15. [React] State - 함수형 컴포넌트의 state와 주의점 지난번에 클래스형 컴포넌트의 state를 다뤘습니다. 이번엔 함수형 컴포넌트의 state를 다룰 차례입니다. 함수형 컴포넌트에서는 바로 state에 접근할 수 없고 useState 함수를 통해서 state에 접근할 수 있습니다. 1. useState useState 함수는 함수형 컴포넌트에서 state를 조작할 수 있게 해주는 기능입니다. useState는 Hooks 기능 중 하나입니다. useState 함수가 처음 만나게되는 Hooks 가 되겠네요. 이것을 배우기 위해 '배열 비구조화 할당'이란것을 사용하겠는데, 이것에 대한 설명은 아래를 참조해주세요. https://bamtory29.tistory.com/entry/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4.. 2021. 11. 3. 이전 1 다음 300x250
