useNavigate2 로그인 버튼 활성화 구현하기 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. SPA로 구성된 React에서 Router 구현하기 리액트는 SPA로 html파일이 하나밖에 없는 라이브러리다. MPA처럼 다른 파일로 넘어가는것처럼 보여주기 위해 여러컴포넌트를 라우터를 이용해 옮겨다닌다. 우리는 한페이지짜리 웹을 만드는 것이 아니니까 라우터 기능을 필히 알아야한다. 이번에는 기존에 작업하던것에 라우터를 적용해보려고 한다. [과제 1] Router 컴포넌트 구현하고 Router 기능 구현하기 일단 먼저 link와 useNavigate를 쓸거기때문에 import를 먼저 해준다. 당연히 export도 미리 해준다. import React from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import "./In.. 2023. 6. 15. 이전 1 다음