인스타 login창 클론 react편

 

 

 

 

 

일전에 html-css-js로 만들어 두었던 요 👆 login 창

js 코드를 모두 버리고 (🥹🥹) 몽땅 jsx 문법으로 다시 짰다.

 

 

기존 html은 그대로 쓰되

css를 scss로 바꾸었고

js만 jsx 문법으로 바꿈!

 

포스팅은 jsx만 다룰 예정 :)

 

 

 

 

---

 

react

 

👇 react 관련 포스팅, 읽어보고 가세요!

https://0119eunji.tistory.com/23

React 정의와 특징

 

 

 

---

 

 

JSX(JavaScript Syntax eXtension)

 

리액트에서 사용하는 자바스크립트 확장 문법이다 

JSX는 html과 js 로직을 하나의 js 파일 안에서 모두 처리!

고로 나도 그렇게 처리했다 ㅎ

 

 

 

 

const login = () => { return() } 

👆 간략하게 보면 이런 형태인데

 

 

const login = () => { jsx 문법 return( html ) } 

👆 이렇게 들어간다

 

 

 

구현하고자 했던 기능은

 

1. id 5글자 이상 입력(@포함), pw 5글자 이상 입력 시 로그인 버튼 활성화

2. 로그인 버튼 활성화시 색이 바뀌어야함

3. 로그인 버튼 누를 시 Main 창으로 이동

 

 

 

그리고 jsx 짜는 순서를 정리해보았는데

 

 

1. id, pw input에 useState 주기 ( 값 받기)

2. id, pw input에 onChange 주기 (input에 이벤트가 생길 시 동작)

3. id, pw input에 onKeyUp 주기 ( 타당성 검증하는 passed 함수 넣기, onKeyUp 이벤트 발생시 passed 함수 사용)

4. 타당성 검증하는 passed 함수 만들기 ( pw 조건 && id 조건 ? 활성화(true) : 활성화(false) )

5. 활성화 불러오는 [isActive, setIsActive] useState 만들기 (비활성화가 default 이므로 기본값 false 줌)

6. btn에 style 주어서 삼항연산자로 색 바꾸어주기 (이때 isActive 조건문으로 사용)

 

 

 

가장 헷갈렸던 건 button에 isActive/ setIsActive을 주는 것과 passed 함수에 isActive/ setIsActive 를 주는 것이었는데

passed 함수 자체는 onKeyUp 때 발생되는 이벤트라 setIsActive를 주는 게 맞다고 판단했다.

button은... 좀 더 공부하고 알아봐야 할 듯하다 🫠

 

 

+

main창으로 이동하는 기능은 과제에 Link 기능을 쓰라해서 비교적 쉬웠다. 그냥 버튼을 link 태그로 감싸기만 하면 되니까...!
그리고 공부하다 useState navigate 를 이용해서 같은 기능을 구현할 수 있다는 걸 알아냈는데 굳이 useState를 안 써도 되는 상황이면 그냥 Link가 낫겠다하는 생각이 들었다

 

 

 

 

후기

 

리액트는 봐도봐도 초면이다. 알 거 같은데... 내 코드에 적용하려면 모르겠다 😅

그래도 어찌저찌 로그인 창 구현은 했는데 console.log 찍어놓고 값 올라오는 거 보면 신기하다

다 구현해놓은 지금은 그냥 내부적으로 동작하는 거 State로 다 만들어 놓으면 되는 거 아닌가? 싶다가도

그럼 버튼은 왜 color. setColor 로 안 주고 isActive가 생겼지? 하는 의문이 든다

분명 내가 만든 코드인데... 🫠

 

구글링하면서 남의 코드 정말 많이 봤지만 돌고돌아 결국 위코드에서 준 자료와 react 공식 문서로 돌아왔다 ㅎ

많이 써보고 공부하며 익숙해지는 수밖에 없겠다는 생각이 마구 들었다 😂

 

 

그럼 파이팅 💪

 

 

 

👋👋