TIL 14 React로 인스타그램 로그인 구현(setState, 삼항연산자)

이전에 바닐라 자바스크립트로 구현했던 인스타그램 로그인창을 구현했던걸 이번에는 리액트로 똑같이 구현하는걸 시도했다.

하면서 많은 시행착오들을 겪었는데 이를 통해서 리액트에 좀 더 가까워지게 된 좋은 경험이됐다.

 

1.  최상단 요소에 height 100% 주는법

리액트를 쓰지않고 그냥 웹페이지 최상단에 height 100%를 주고 시작할때 html, body에 height:100%을 주면 해결이 되지만

이는 리액트에서는 하나를 더 추가해야된다! 

 

리액트 index.html 하단부분

 

리액트는 단하나의 index.html 파일 하나로 이루어져있고 우리가 만드는 모든 내용들은 저 <div id='root'></div>안에 속해 있다.

그래서 css파일에다가 body, html, #root{ height: 100% }을 줘야 최상단 요소에 비로소  적용이 된다!

 

2. setState로 state값 변경하기

리액트 class컴포넌트에서는 웹페이지 내부에서 값이 변경되었을때 화면에 영향을 줄 수 있는 값들을  constructor함수 내부에

this.state라는 컨테이너에 보관하고 있다. 이렇게 보관하는 이유는 리액트 내부에서 state값이 변경되었을때 새로고침 없이

즉각적으로 변경된 화면을 랜더링을 해주기때문이다. 

 

Login 컴포넌트에 관리하고 state값들

 

2.1  setState이후 state 값을 호출하기

 

id를 적는 iniput태그에서 onchange이벤트가 발생하면 handleInput 함수가 실행

 

state값중 IdValue값을 현재 input태그 내의 값으로 변경하고 state값을 콘솔창에 띄우는 함수

 

로그인창 화면에 id를 넣는 input태그에 값이 변경될때마다 그 변경된 값을 콘솔창에 띄울려는 handleInput을 만들었다.

 

setState이후 함수내부에서 state값을 찍어보는 중

 

이상한점이 눈에 보인다. 바로 state값이 변경된 값이 아닌 이전 값이 콘솔에 찍히는걸 볼 수 있다! 리액트 공식문서에 나오듯이

setState함수는 비동기적으로 작동이 되기때문에 setState를 발생시킨 함수 내부에서는 변경된 값을 가져올 수 없다!!!

 

render함수 호출 이후 Idvalue값을 콘솔에 찍는 코드

render함수가 작동하고 console창에 변경된 state값이 호출되는 확인해보는거다.

 

변경된값이 콘솔창에 잘 나오는걸 볼 수 있다!!

 

2.2  setState이후 변경된 state값 접근

위 영상에서 볼 수 있듯이 render함수 호출이후에는 변경된 state값이 잘 나오는걸 볼 수 있다. 

그럼 render함수 이전에 변경된 state값을 가져올 수 없는건가? 해결방법은 바로 setState에 콜백함수로  변경된 state값에

접근이 가능하다.

 

setState함수 내부 콜백함수로 setStateChang라는 함수 호출

 

이렇게 콜백함수에서  변경된 state값에 접근할 수 있다.

 

변경된 state값을 불러내는걸 할 수 있다!!

 

이런 방법으로 비동기적으로 작동하는 setState함수로 통해 바로 변경된 state값을 접근하는 방법을 알아냈다!

정리하면 이렇다. 원래는 setState를 호출한 함수 내부에서는 변경된 state값에 접근이 안된다. render함수 이후에는

변경된 값에 접근이 가능하다. 하지만 setState내부에 콜백함수를 통해서 접근이 가능하다!!

 

3.  버튼 색깔 변경 및 활성화

원래는 저 위에서 해결한 방법으로 콜백함수 내부에서 변경된 state값들을 받아서 유효성 검사한후 버튼의 opacity값을 

setState를 변경해서 button에 적용할려고 했다. 이 방법도 가능하지만 사실 더 쉬운 방법을 찾아서 구현했다.

바로 삼항연산자를 통해서 굳이 콜백함수에서 변경된 state값에 접근할 필요없이 쉽게 구현을 했다.

 

삼항연산자로 state값들이 조건에 따라 값을 부여

 

render함수 이후에는 변경된 state값에 접근이 가능하기때문에 삼항연산자로 아주 편하게 값을 부여 할 수 있다!

 

아이디창에 @가 있고 비밀번호가 5자리 이상이면 버튼 활성화

 

잘 작동하는걸 볼 수 있다. 그럼 질문이 있을 수 있다. 처음부터 그냥 삼항연산자로 쉽게 구현하면 되는거 아니였냐고.

몰랐으니깐 이런 시행착오를 겪은거다. 그리고 언젠가 콜백함수를 통해서 변경된 state값을 가져와야 하는 일이

생길거고 먼저 이런 경험을 통해서 알아가게 된거에 중요한 의미를 둔다. 

 

4.  결론

1. 단순히 setState를 호출한뒤 render함수 이전에는 변경된 state값에 접근이 안된다.(하나의 이벤트가 발생하는중)

2. render함수 이전에 변경된 state값을 접근하려면 setState에 콜백함수를 통해서 가능하다.

3. render함수 이후에는 변경된 state값에 접근이 가능하다.

4. 삼항연산자를 통해서 쉽게 값을 부여할 수 있는 방법이 있다 

5. 역시 만들면서 시행착오를 겪어야 배워가는게 많다.