"조금씩 천천히 꾸준하게.."
오늘은 useState 함수에 대해 정리해보려고 합니다. useState 함수는 React version 16.8 부터 새롭게 추가된 Hook 이라는 문법의 일부입니다. 기존에는 state 를 쓰기 위해 클래스 문법을 써야만 했지만 이제 useState 함수를 이용해 함수 문법으로 작성한 컴포넌트에서도 state 를 사용할 수 있게 된 것이죠.
useState 함수의 기본 모양은 다음과 같습니다.
const [count, setCount] = useState(0);
// const [state 저장 변수, state 갱신 함수] = useState(초기값)대괄호 [ ] 로 묶인 배열은 구조분해할당의 문법을 사용한 것입니다. 주석에 적은 것처럼 첫번째는 state 의 값을 저장하는 변수의 이름이고, 두번째는 state 의 값을 갱신하는 함수의 이름이 됩니다. 그리고 useState 함수의 전달인자로 제공하는 값이 state 안에 초기값으로 할당됩니다.
따라서 위의 코드에서 state의 현재 값인 count = 0 이고, 이 state 를 갱신할 때 setCount 함수를 호출하여 갱신한다는 것을 알 수 있습니다.
useState 함수로 만들어낸 state 는 이벤트를 처리하는 onChange, onClick 등과 조합해 사용자의 입력을 받아 처리할 수 있게 됩니다. <input> 이나 <textarea> 등에 사용하면 사용자의 입력을 받아 이를 저장변수에 할당해 사용할 수 있게 되는 것이죠. 이로써 인터랙티브 한 웹환경을 구축하는 데 한 걸음 더 가까워졌다고 할 수 있습니다.
주어진 것 외에 다른 것들을 도전하려다가 Link 를 이용한 props 의 전달에서 막혀서 한참을 헤매는 중입니다. 벌써 2일째 골머리를 앓는 중인데 딱히 속시원하게 해결되는 것은 없네요. 얼른 문제를 해결하고 뿌듯한 마음으로 블로깅할 수 있게 되길 바라면서, 핑계삼아 오늘은 여기에서 블로깅을 마칠까 합니다.
