React

Link 지정한 경로로 페이지를 이동시켜주는 컴포넌트 - to 속성으로 지정한 경로를 이동시켜 준다. - Link 컴포넌트에선 "href" 대신 "to"를 사용한다. - 이동할 경로의 앞에 /를 사용하면 절대경로, /를 사용하지 않으면 상대경로. NavLink - 현재 URL과 to가 가리키는 링크가 일치할 때 , activeStyle과 activeClassName이 활성화 되고, 일치하지 않으면 비활성화 된다. - activeStyle을 사용하여 위 코드와 같은 기능을 하도록 만들었다. useNavigate - 지정한 경로로 이동시켜주는 훅. - 인자로 들어가는 문자열에 /를 빼면 상대경로, /를 사용하면 절대경로

react-router-dom" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스현재 경로와 일치하는 컴포넌트를 렌더링 시켜주는 라이브러리 BrowserRouter" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스라우팅 범위를 지정import { BrowserRouter } from "react-router-dom";const App = () => { return ( {/* ... */} );}export default App;1. BrowserRouter 는 라우팅 범위를 감싸며, 내부에는 렌더링 시킬 컴포넌트들이 들어간다2. 렌더링 시킬 컴포넌트들은 같은 src폴더에 있어야 한다. (외부에 있으면 에러) Routes, Rout..

react-hook-form" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스폼의 유효성을 검사하는 라이브러리 useForm" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스유효성 검사를 위한 여러 프로퍼티들과 메서드들을 가진 객체를 반환하는 메서드import { useForm } from "react-hook-form";const Inputs = () => { const formTools = useForm(); return ()}export default Inputs;1. useForm의 인자에 { mode: "onChange" } 를 넣으면 유효성을 실시간으로 모니터링 한다.formState폼 상태에 관한 여러가지 정보들이 들어있는 객체import..

HTML 삽입 미리보기할 수 없는 소스 prop drilling을 방지하기 위한 훅 HTML 삽입 미리보기할 수 없는 소스 import { createContext, useState } from "react"; const LanguageContext = createContext(); const LanguageProvider = ({ children }) => { const [language, setLanguage] = useState("ko"); const toggleLanguage = () => { language === "ko" ? setLanguage("en") : setLanguage("ko"); } return( {children} ) } export default LanguageProvider..