분류 전체보기

[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를..

[React] Styled Component 이해하기

Styled Component 이해하기 Styled Component란? 예시 심화 Styled Component란? 기존에 사용하던 HTML의 태그를 style을 설정하여 component로 만든 것을 Styled Component라고 합니다. 이러한 Styled Component를 만드는 방법은 아래의 코드와 같습니다. Styled Component를 사용하기 위해서는 styled-components라는 패키지를 다운로드하여야 합니다. 다운 방법은 npm i styled-components라는 명령어를 통하여 다운 가능합니다. const 컴포넌트 이름 = styled.적용할 태그 이름` 적용할 스타일 ` ``(탬플릿 리터널) 사이에 적용할 스타일을 입력하시면 됩니다. 적용할 태그는 HTML의 태그를 ..