useState란 리액트에서 사용하는 변수저장법이다
useState의 선언법은 변수를 배열로 현재값으로 사용할 변수와 그변수를 어떠한 값을 담아와서 앞의 변수에 적용시켜줄 함수를 담아 선언한후 그배열을 useState라는메소드 안에 인자로 현재값을 넣어준다.
예를들어 대표적인 실행방법으로 카운트를 표시하는 박스를 하나만들고
버튼을 하나만들어 버튼을 누를때마다 카운트가 1씩 늘어나는 로직을 만든다고 하면
위 사진처럼 리액트의 실행함수 안에 useState를 선언하고
실행할 리턴문안에 중괄호안에 현재값을 카운트값으로 넣어준후
버튼에 온클릭 이벤트를 달아주어 그안에 콜백함수로 변경값을 useState로 선언된 함수를 넣어주면 끝난다.
자바스크립트와 비교했을때 너무쉽고 이게 진짜실행된다고? 라고생각했지만
너무 훌륭하게 적용되는 모습을 보며 전율을 금치못했다.
자바스크립트에선 html안에 자바스크립트를 쓰겠다는 연결을 한뒤
docment안의 id값 또는 class의 값을 가져오는 선언을 한뒤
이벤트리스너를 담아 인자로 타겟을 설정한후 그타겟이움직일 함수를 가져오며
그함수의 innerHTML의 값을 변경해주어야했다.
하지만 리액트에선 그런연결은 필요가없다.
내가 이방식으로 변경하겠다는 선언을 한뒤 그선언을 해당로직에 담아주기만 한다면
리액트가 알아서 자바스크립트와 HTML의 연결을 알아서 해주는 구성을 담고있다.
그렇게 신나게 구현을 하면서 나에겐 조금당황스러운 일이 생겼다.
로그인을 구현하며 아이디에 한글자 패스워드에 한글자 이상 입력하게 된다면
로그인버튼을 비활성화에서 활성화로 바꿔주는 로직을 짜는 중이였다.
분명히 난 한글자씩 입력을 해주었지만 해당 버튼은 활성화 되지 않았다.
무슨일일까?
한글자를 더입력하게 되었을때서야 버튼은 활성화 되었지만
이건 내가원한 결과값이 아니다.
만일 극단적으로 아이디가 1글자라면?
비밀번호가 1글자라면?
그럴리는 없겠지만 만일 그렇다면 난 대처하지 못하겠지?
라는 마음으로 하나하나 뜯어보며 콘솔로그를 찍어봤고
이유를 찾아냈는데 그이유는 바로 이렇다
아이디 , 패스워드에 달아준 함수에는 변화하는 input값이 담겨
useState로 이동하고 저장된다.
그렇게 버튼을 입력했을때 우리는 그값을 아이디와 비밀번호로 제출할수 있었다.
그렇지만 내가 달아준 버튼 로직에담길때는 마지막 1글자가 담기지 않았다.
무슨일일까?
분명 버튼을 누를때는 입력이 잘되었지만
그함수안에 같이있는 버튼비활성화 로직에 적용될때는 마지막글자가 렌더링이 되기
바로이전이였다.
분명나는 onChange 안에 넣었기 때문에 한글자 한글자를 쓸때마다 랜더링이 되었어야 했지만
랜더링은 되었지만 함수안에 콜백함수로 있었기에 비활성화가 받은 입력값은 -1
상태였던것이였다
너무속상해 비동기를 동기로 바꾸는 방법을 찾다찾다가 너무도 가까운곳에서 답을 찾았는데
그게바로 useEffect였다.
useEffect란 랜더링이 될때마다 함수를 실행해주는 함수로
인자로 콜백함수를 받는다.
즉 랜더링이 될때마다 어떠한 실행문을 실행시켜줄수 있는것이였고
그말은 즉 랜더링이 모두가 끝난후 마지막에 실행시켜주는 함수다.
그것만으로도 충분히 쓸만했지만
2번째 인자로 배열을 받을수 있는데 그배열안엔 useState가 들어간다 2번째 인자는그
실행을 또 어떠한 랜더링이 실행됬을때만 사용할수 있게끔 만들어 주는 아주 기특한
녀석이였다.
나는 로그인로직을 따로 뺀후 useEffect에 비활성화 활성화 변경로직을 넣어준후
2번째 인자로 아이디와 패스워드의 useState 초기값을 넣어주었다.
이로인해 로그인 인풋에 한글자를 입력할때
랜더링이 실행되고 랜더링이 다끝난후 useEffect가 실행된후 화면은 렌더링을 모두
마치게된다.
당연히 인풋값이 하나씩 밀리는 일은 사라지고 내 로직은 완성되게 되었다.
이번 공부를 하며 바닐라 자바스크립트보다 쉽다지만
그나마 자바스크립트를 공부한 시간이 더길기에 ‘아….차라리 바닐라 자바스크립트가
편한거같아…’ 라고 생각한 내가멍청했다는 것이다.
