2025/04/02 2

React Router

라우팅(Routing)이란?• 사용자가 요청한 URL 에 따라 해당 URL 에 맞는 페이지를 보여주는 것• 가장 많이 쓰이는 라이브러리? React Router 리액트 라우터 ( React Router )• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공 리액트 라우터 ( React Router )의 주요 컴포넌트 BrowserRouter • HTML5를 지원하는 브라우저의 주소 감지 • Router의 역할 • 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당 • URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단에 위치해야 한다 Routes, Route • 경로가 일치하는 컴포넌트를 렌더링해주도..

React Style - Sass, Styled-Components, Tailwind

React 컴포넌트 스타일링 방식• 일반 CSSimport 명령어를 사용해서 'css 파일을 불러내서 사용하거나 style 속성에서 사용함.즉, 평범한 CSS 사용방식기존 CSS 클래스를 이용할 경우, 컴포넌트별 클래스가 중복되지 않도록 클래스명을 지정해야 함Sass• Syntactically Awesome Style Sheets • CSS 전처리기 종류 중 하나 • 복잡한 작업을 쉽게 할 수 있도록 도와주고, 스타일 코드의 재활용성과 코드의 가독성을 높여 유지보수를 더욱 쉽게 해준다.Styled Components• JavaScript 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리 • 컴포넌트 기반의 설계 방식Tailwind CSS• utility-first 개념으로 만들어진 CSS ..