본문 바로가기

onChange2

로그인 버튼 활성화 구현하기 idValue의 값이 조건을 만족할 때 로그인 버튼이 활성화되고 버튼을 누를 수 있도록 만들고 싶었다. 그리고 버튼을 누르면 main 페이지로 이동할 수 있도록 만들어 주려고 했다. 바닐라 자바스크립트에서는 DOM을 직접적으로 조작하면서 input창의 값을 불러왔는데 리액트는 가상돔을 구현하기때문에 직접적인 DOM 조작을 할 필요가 없어서 뭔가 다른 산을 만나게 되었다. 일단 이번에 useState와 useNavigate 훅을 사용할 예정이기 때문에 import를 해주었다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; id와 pw의 input 창의 값.. 2023. 6. 19.
React로 컴포넌트 구성하고 이벤트 사용하기 리액트를 시작하고 처음으로 과제를 받았다. 사실... event를 DOM을 불러서 하던 바닐라 자바스크립트에 비해 쉬울거라고 생각했는데 역시 처음 배우는거라 조금 버벅거렸다.. [과제 1] 예시화면대로 컴포넌트 구성하기 [과제 2] input, button 태그에 event 적용하기 onChange 이벤트를 활용해주세요. handleInput 이라는 함수를 만들어서 onChange 이벤트가 발생했을 때 실행되도록 구현해주세요 handleInput 함수가 실행되면 개발자도구에 console 탭에 "input 태그 동작"이라는 메세지가 출력되도록 구현해주세요 onClick 이벤트를 활용해주세요. handleButton 이라는 함수를 만들어서 onClick 이벤트가 발생했을 때 실행되도록 구현해주세요 hand.. 2023. 6. 15.