오늘은 헬스장인 휴무인 관계로 휴식..
저번주에 인스타그램 로그인 페이지와 메인 페이지를 html, css, javascript로 구현했는데 지금은 react로 다시 전환하는 작업중이다.
현재 구현해낸 것은 로그인 페이지에서 사용자 입력 데이터를 저장, 아이디 값에 @포함되있고 비밀번호가 5자 이상일 때만 로그인 버튼이 활성화되며 메인페이지로 넘어가는 것을 구현했다.
- this.state 내부에 id와 pw키의 값을 "" string으로 초기화시켜주었다.
- 그 밑에는 goToMain 함수에 조건문을 써서 id값에는 @포함, pw값에는 5글자 이상일때만 메인페이지로 넘어갈 수 있게 했다.
- handle 함수 두개를 써서 id와 pw값이 저장될 수 있게 했고 그것을 각각의 render함수 밑의 id, pw에 넣어주었다.
- onChange 함수는 값이 바뀔때마다 input 값을 호출
- 삼항연산자를 사용하여 조건을 만족할때는 login-btn-active를 만족하지않을때는 login-btn을 불러오도록 구현.
- scss 파일 내부에 새로운 class를 생성. 배경색만 바꿨다.
중간 단계
지금까지 만든 기능을 구현했다.
