IT공부/React

[React] Link 컴포넌트 이해하기

Link 컴포넌트 이해하기 Link 컴포넌트란? Link 사용방법 Link 컴포넌트란? Link 컴포넌트란 React에서 사용하는 태그라고 설명할 수 있습니다. 태그의 경우는 href로 지정한 주소로 이동을 하기 때문에 새로고침이 일어나지만 의 경우는 주소로 이동하여 전체를 새로고침 하는 것이 아니라 필요한 부분만 재 랜더링 하도록 하는 컴포넌트입니다. 태그에서는 href를 통하여 이동하였다면 는 to를 이용하여 이동을 한다는 것이 특징입니다. Link를 사용하게 된다면 필요한 부분만 재 랜더링 하므로 속도 향상에 도움이 됩니다. Link 사용 방법 import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; function App() {..

[React] Routes와 Route이해하기

Routes와 Route 이해하기 Routes와 Route 이해하기 Routes와 Route 사용 방법 Routes와 Route 이해하기 React는 SPA(Single Page Application)를 만들기 위한 프레임 워크입니다. SPA에서는 단일 페이지를 가지므로 화면의 전환을 Route를 통하여 어떠한 내용을 띄울 것인지 정할 수 있습니다. Routes는 Route의 복수형으로 Route를 묶어주는 역할을 하고 기존의 Switch의 역할을 하게 됩니다. Routes를 사용하지 않고 Route를 나열한다면 조건에 맞는 Route를 다 보여주게 됩니다. Route가 실질적인 역할을 합니다. 위와 같이 Routes로 감싸는 경우 현재 주소의 라우터가 "/라우터명/추가 라우터명"이라면 추가 만 화면에 ..

[React] useNavigate 이해하기

useNavigate 이해하기 useNavigate란? useNavigate 사용 방법 심화 useNavigate란? 함수형 컴포넌트에서 사용하는 Hooks 중 하나입니다. 특정 이벤트가 발생하였을 때 주소를 이동시키는 기능을 제공합니다. HTML의 경우 아래의 코드와 같이 a태그와 href를 이용하여 주소를 이동하였다면 React에서는 useNavigate를 이용하여 주소 즉 React내에서 라우터 이동을 합니다. 네이버 useNavigate 사용 방법 import {useNavigate} from "react-router-dom" const 컴포넌트 명 = ()=>{ const navigate = useNavigate() const moveFunc = ()=>{ navigate("/이동할 라우터 명"..

[React] useState 이해하기

useState 이해하기 useState란? useState 사용 방법 useState란? 함수형 컴포넌트에서 사용하는 Hooks 중 하나입니다. React에서 동적인 변수를 state라고 부르는데 useState는 이름만 들어도 state를 사용한다는 느낌을 줍니다. HTML과 JavaScript를 이용한 페이지에서는 아래와 같이 변수를 수정하면 변수를 읽어 화면에 변한 변수를 띄워주었습니다. let testNum = 3; function add(){ testNum +=3; } add라는 함수를 실행하면 testNum이 증가하여 화면에서 testNum을 띄워두었다면 3씩 증가하는 것을 볼 수 있었습니다. 하지만 React에서는 이러한 방식으로는 화면에서 변화를 볼 수 없습니다. 따라서 useState를..