Nerd
Nerd
Nerd
전체 방문자
오늘
어제
  • 분류 전체보기 (439)
    • Today I Learned (333)
    • 주간회고 (8)
    • FrontEnd (5)
    • ErrorNote (7)
    • 자바스크립트 (24)
    • 알고리즘 (13)
    • html과 css (21)
    • 토이프로젝트 (5)
    • React-Native (1)
    • React (13)
    • node (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 리덕스 툴킷
  • npm i
  • TIL
  • 에러노트
  • 선언적 프로그래밍
  • React
  • 파이썬 기초
  • 코드숨
  • ErrorNote
  • Today I Learned
  • 리액트 훅
  • 메타인지
  • JSX
  • 명령적 프로그래밍
  • 주간회고
  • 토이 프로젝트
  • 파이썬기초
  • 데이터 타입
  • package-lcok.json
  • 토이프로젝트
  • 값의 할당 및 재할당
  • 자바스크립트
  • 리액트
  • 모던 자바스크립트
  • npm ci
  • 절차지향적 프로그래밍
  • 3FS
  • Redux
  • pacakge.json
  • wil

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Nerd

Nerd

React

TIL] Switch

2021. 6. 29. 03:08

라우터

스위치는 라우터의 내장된 컴포넌트 종류 중 하나입니다!

스위치를 알기 전에 라우터를 먼저 알아보았습니다!

라우터는 path속성으로 자신이 원하는 URL 주소를 만들고 해당 URL에 들어갈 컴포넌트를

지정할 수 있기 때문에 브라우저 이동 없이 컴포넌트만 바꿔서 새 로고 침 없이 페이지 전환이 가능합니다.

싱글 페이지 애플리케이션은 새로고침을 하지 않고 컴포넌트만 바꾸기 때문에

싱글 페이지 애플리케이션이 어떻게 새로운 페이지를 그려주는지 알게 되었습니다!

바로 라우터를 통해 그려줍니다!


Switch

스위치는 라우터로 생성된 자식 컴포넌트 중 매칭 되는 첫 번째 라우터를 렌더링 해줍니다.

통상적으로 메인 라우트의 경로를 "/"로 지정하고 다른 라우터에는

"/nerd" 이런 식으로 지정하는 경우가 많은데

스위치를 사용하지 않으면 다른 컴포넌트들이 다 렌더링 되는 경우를 볼 수 있습니다.

이러한 경우를 방지하기 위해 스위치를 사용합니다.


오늘은 리액트 사전 만들기 프로젝트를 하면서

스위치에 대해 공부하게 되었습니다!

강의를 들을 때도 사용을 했지만 용도를 정확하게 알지 못해서

알아보게 되었고 이제는 Switch의 용도를 알았기에 정확하게 사용할 수 있을 것 같습니다!

내일도 열심히 프로젝트를 해서 완성에 한걸음 다가가야겠습니다!

모두들 파이팅!!✍️✍️👍👍👍

'React' 카테고리의 다른 글

TIL] 라이프사이클 복습  (0) 2021.07.02
TIL] 스타일 컴포넌트  (0) 2021.07.01
TIL] 리액트  (0) 2021.06.28
TIL] 리액트 기초  (0) 2021.06.27
TIL] 리액트 기초  (0) 2021.06.26
    'React' 카테고리의 다른 글
    • TIL] 라이프사이클 복습
    • TIL] 스타일 컴포넌트
    • TIL] 리액트
    • TIL] 리액트 기초
    Nerd
    Nerd
    꾸준히 열심히 지속적으로 하겠습니다!

    티스토리툴바