React 쇼핑몰 만들기

터미널에 npm install react-router-dom@6 입력 후 설치index.js 파일로 가서import { BrowserRouter } from "react-router-dom"를 import 해오고<BrowserRouter>로 App 컴포넌트를 감싼

app.js에 useNavigate, Outlet을 추가로 importLink to 외에 페이지 이동기능을 만들고 싶으면 useNavigate()를 사용한다.경로에 ('-1')을 쓰면 뒤로가기도 가능하다.유저가 이상한 경로로 접속했을 때 "없는 페이지입니다" 이런거 보

상품 상세페이지에 상품명 넣어보기shoes는 App 컴포넌트에 있으니 App -> Detail로 데이터를 props로 아래와 같이 전송한다.페이지를 여러개 만들고 싶으면 URL 파라미터 문법을 사용한다.path 작명할 시 path="/:작명"아래와 같이 페이지마다 다른

터미널에 아래명령어로 설치한다.npm install styled-components그리고 사용하고 싶은 컴포넌트 상단에 import 해온다.아래와 같이 styled.태그명\`\`; 으로 사용 가능하다.변경되거나 재사용할 속성은 props로 설정이 가능하다.또한 자바스크

컴포넌트는 Lifecycle이라는 개념이 있다.1\. 생성이 될 수도 있고(mount)2\. 재랜더링이 될 수도 있고(update)3\. 삭제가 될 수도 있다.(unmount)컴포넌트의 사이클에 따라서 해당 시점에 특정코드를 실행할 수 있다.해당 시점에 갈고리를 달아서

2초 후에 사라지는 박스 만들기기억상기❗❗❗동적인 UI 만들 땐 1\. UI 상태를 저장할 state 만들고2\. state에 따라서 UI가 어떻게 보일지 작성하기useEffect()의 둘째 파라미터로 를 넣을 수 있는데거기에 변수나 state같은 것들을 넣을 수

정확한 규격에 맞춰서 요청해야하는데 어떤 데이터인지 (URL 형식으로)어떤 방법으로 요청할지 (GET or POST)서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는간단한 브라우저 기능을 AJAX라고 한다.AJAX로 GET/POS

위 코드 실행하면 서버로 { name : 'park' } 자료가 전송된다.완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 된다.위 코드를 URL1, URL2로 GET요청을 동시에 해준다.둘 다 완료시 특정 코드를 실행하고 싶으면 .then()

(Detail component)eventKey 속성은 버튼마다 자유작명 defaultActiveKey : 페이지 로드시 어떤 버튼에 눌린효과를 줄지 결정하는 부분.삼항연산자로만 표현하기 번거롭기 때문에 Detail() 컴포넌트 밖에서 if문으로 작성tab, setTa

애니메이션 동작 전, 후 스타일을 담을 className 만들기 CSS에 transition 속성 추가원할 때 2번 탈부착 (toggle)처음엔 안보이다가 end를 부착할 때 마다 fade-in이 되는 css앞에 만든 탭메뉴 컨텐츠를 fade-in 시켜보기원할 때 (t

App에 있는 shoes라는 state를 TabContent로 전달하려면아래 그림처럼 props를 두번 전송해주어야한다.컴포넌트간 state통신은 부모에서 바로 밑 자식으로만 가능하기 때문인데이러한 방식이 불편하다면 Context API를 사용하면 된다.context를

Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다.Redux를 설치하면 js 파일 하나에 state들을 보관할 수 있는데모든 컴포넌트가 직접 그 state들을 꺼내쓸 수 있다. props 전송이 필요없어진다! ✨컴포넌트가 많아질 수록 사이

장바구니 페이지를 만들어보자store안의 state를 Cart 컴포넌트에 데이터바인딩 해보기Cart.jsx 파일생성 후 라우터 1개만들기장바구니 페이지에서 사용할 Table 레이아웃(Cart.jsx)위 <Cart /> 컴포넌트에 아래 data를 store에 저장

useState의 변수, set변수의 set 역할처럼 변경함수를 만들어야하는데3 STEP❗1\. store.js에 state 변경해주는 함수부터 만들고2\. export 해두고3\. 필요할 때 import 해서 쓰면 되는데 dispatch() 로 감싸서 써야한다.저번

(store.js)changeName() 사용시 변경 이름이 'park'으로 변경될 것이다.return 오른쪽에 적은걸로 기존 state를 갈아치워주니까.근데 state를 직접 수정하라고해도 변경이 잘 된다. state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유