React (11) 썸네일형 리스트형 [React] React Bootstrap 사용 방법 Bootstrap은 레이아웃, 폼, 버튼, 모달 등을 제공하여 웹 사이트 개발을 보다 쉽게 할 수 있도록 도와주는 CSS, JS 프레임워크이다. 해당 포스터에서는 리액트 용 react-bootstrap을 사용 해보자! 아래 사이트에서 로그인 없이 무료로 사용이 가능하며, 단순히 코드를 복사 붙여넣기 하여 편하게 사용할 수 있다! React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 사용해 보기 제공되는 기능도 많고 결과 화면도 미리 보여줘서 골라 사용하기 편하다! 홈페이지 상단 'Components' 탭을 클릭하면 여러 컴포넌트를 볼 수 있다. 예제.. [React] a태그와 Link, useNavigate()의 차이 페이지를 이동하는 HTML a태그와 react-router-dom에서 제공되는 Link 컴포넌트, useNavigate() 훅의 차이점에 대해 알아보자! 차이점 a태그 : 새로고침이 일어난다. Link, useNavigate() : 새로고침이 일어나지 않는다. 새로고침이 무슨 상관 있을까? DB에 실시간으로 값을 저장하지 않는 이상 state값이 초기화 되기 때문 사용법 npm install react-router-dom import { Link, useNavigate } from 'react-router-dom'; const navigate = useNavigate(); {/* a태그 */} Cart {/* Link */} Cart {/* useNavigate() */} navigate('/cart').. [React] 개발 환경 세팅 설치할 라이브러리styled-components : CSS 문법을 그대로 사용하면서 스타일된 컴포넌트 형태로 만들어주는 라이브러리styled-reset : 기본 css를 초기화react-icons : 다양한 아이콘을 쓸 수 있는 라이브러리react-router-dom : 라우팅(사용자가 원하는 경로로 보내는 과정) 라이브러리@reduxjs/toolkit react-redux : 전역 상태 관리 라이브러리react-bootstrap bootstrap : 레이아웃을 복사 붙여넣기 식으로 개발 가능한 css, js 라이브러리 전체 설치npm install styled-components styled-reset react-icons react-router-dom @reduxjs/toolkit react-redu.. 이전 1 2 다음
