작성자 : 김건휘

☑️useState

🍀state란? ⁉️ ❔ ☑️ ➡️


컴포넌트의 상태(컴포넌트가 가질 수 있는 상태) ex) 시계라는 컴포넌트가 있다면, state로 time을 가질 수 있다.

🍀useState란?


컴포넌트의 상태를 간편하게 업데이트 해줄 수 있게 도구를 제공 ex) state: time = 5시 ⇒ state: time = 6시

🍀useState 문법


const [state, setState] = useState(초기값);

state 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면, state와 setState라는 두가지 요소를 배열 형태로 return해준다. 현재 상태 값은 state 변수에 들어있고, state를 변경시켜주고 싶을 때는 setState를 이용해서 간편하게 변경 시켜줄 수 있다. 여기서 state와 setState의 이름은 마음대로 지정할 수 있다.

🍀간단한 예시


const [time, setTime] = useState(5);

⇒ State: time = 5 (time이라는 state가 초기값으로 5를 가진다.)

setTime(6);

⇒위와 같이 setTime함수 인자에 변경될 값을 넣어주면, State: time = 6으로 변경된다.

🍀구현 예시