⚛️ React

React : styled-components (설치 , 사용, 장단점), css파일 js에 종속시키기

styled-components 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다. 설치 터미널에 아래 코드를 입력한다. npm install styled-components * 현재 version6 이후 해당 명령어 입력 시 문제가 발생하고 있어서, npm install styled-components@5.3.10로 입력했다. 그리고 사용하고 싶은 컴포넌트 맨 위에 import해온다. import styled from 'styled-components' 사용 import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey; `; let YellowBtn = styled.button` backgrou..

React : 가나다정렬되어도 끄떡없는 상세페이지 불러오기 (useParams, find())

가나다정렬되어도 끄떡없는 상세페이지 불러오기 조건 배열의 순서가 변경되기 전과 후가 같은 상품으로 이동되도록 만든다. 풀이 import { useParams } from "react-router-dom"; function Detail(props){ let {id} = useParams(); let selectedShoes = props.shoes.find(function(shoe){ return shoe.id === parseInt(id); }) return ( {selectedShoes.title} {selectedShoes.content} {selectedShoes.price} 주문하기 ) } export default Detail; find()를 사용하여 유저가 입력한 url파라미터와 상품 id가 ..

React : URL 파라미터 (useParams)

URL 파라미터 상세페이지가 데이터에 따라 수백개가 필요한 상황이 생길 수 있다. 이 경우에 URL 파라미터를 사용하면 된다. 부모페이지 path 작명에서 '/:작명'을 입력하면 아무 문자를 뜻한다. 주소창에 /detail/작명 입력했을 때 컴포넌트를 보여달라는 것이다. 자식(연결)페이지 import { useParams } from 'react-router-dom' function Detail(){ let {id} = useParams(); return (

React : 리액트 라우터 (navigate, 404페이지, nested routes, outlet)

navigate navigate 사용하는 법 1. react-router-dom에 import한다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'; 2. 변수에 함수를 할당하고 원하는 위치에 onClick 이벤트로 걸어둔다. function App() { let navigate = useNavigate() return ( { navigate('/cart') } }>장바구니 { navigate('/detail') } }>상세보기 ); } 재밌는 기능 navigate 안에 -1을 넣으면 뒤로가기, 2를 넣으면 앞으로 두번 가기 이런 기능들이 있다고 한다. { navigate('-1') } }>뒤로가기 { navigate..

React : 리액트 라우터 (설치, 세팅, 이동버튼) 및 외부라이브러리 사용법

리액트에서 페이지 나누는 법 리액트를 쓰지 않으면 페이지를 나누고 싶을 때 html을 여러개 만들지만, 리액트는 html 파일을 하나만 사용해도 된다. 컴포넌트를 만들어서 상세페이지 내용을 채운다 /페이지로 접속하면 해당 컴포넌트를 보여준다 react-router-dom이라는 라이브러리를 쓰면 위 작업을 쉽게 할 수 있다. 설치 터미널에 아래 코드를 입력한다. (뒤 6은 버전명이다.) npm install react-router-dom@6 그리고 index.js에 import를 삽입하고, 태그를 감싸는 코드를 입력한다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementBy..

React : 데이터 바인딩해서 컴포넌트로 뿌리기 (템플릿 리터럴 Template literal)

데이터 바인딩해서 컴포넌트로 뿌리기 조건 data.js로 분리되어있는 data를 바인딩해서 컴포넌트로 만들어 여러 상품을 한번에 뿌려야 한다. 풀이 function App() { let [shoes] = useState(data); return ( ShoeShop Home Cart Pricing { shoes.map(function(a, i){ return ( ) }) } ); } function Product(props){ return ( {props.shoes[props.i].title} {props.shoes[props.i].price} ) } 알게 된 점 중괄호({}) 내에서 문자열에 변수를 포함시키려면 템플릿 리터럴(Template literal) 문법을 사용해야한다. 템플릿 리터럴은 백틱(``..