Redux를 배우기 위해 쇼핑몰 장바구니 기능을 구현해보겠습니다. Redux는 상태 관리 라이브러리로, props 전송 없이도 상태를 공유할 수 있게 도와줍니다. 1. 장바구니 페이지 만들기 (App.js) 먼저 App.js 파일에서 /cart로 접속할 수 있는 를 추가합니다. 그리고 Cart.js 파일을 새로 만들어서 표를 하나 만듭시다. (Cart.js) import { Table } from 'react-bootstrap' # 상품명 수량 변경하기 1 안녕 안녕 안녕 2. Redux 설치 npm install @reduxjs/toolkit react-redux 터미널에 위의 코드를 입력해서 redux를 설치합니다. 이때, package.json 파일에서 'react'와 'react-dom'의 버전이..
리액트에서 state를 여러 컴포넌트 간에 공유하고 싶을 때, Context API를 사용하여 props 전송 없이도 state를 공유할 수 있습니다. 1. createContext() 함수로 Context 생성 (App.js) export let Context1 = createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12]); (생략) } 먼저, createContext() 함수를 사용하여 Context 객체를 생성합니다. 이 객체는 state의 보관함 역할을 합니다. 2. Provider로 컴포넌트 감싸기 (App.js) export let Context1 = createContext(); function App(){ let [재고, ..
이번에는 transition을 사용한 애니메이션 주는 방법에 대해 배워보겠습니다. 우선 애니메이션 만드는 순서는 아래와 같습니다. 1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가하기 4. 원할 때 2번 탈부착하기 그러면 지난 번 만들었던 탭UI에 fade in 애니메이션을 주는 것을 목표로 하나씩 진행해보겠습니다. 1. 애니메이션 동작 전/후 className 만들기 .start { opacity : 0 } .end { opacity : 1; } start를 달면 동작 전, end를 달면 동작 후입니다. 2. transition 추가 .start { opacity : 0 } .end { ..
이번에는 새로운 내용보다는 이전에 배웠던 내용들을 활용해서 탭UI를 만들어보겠습니다. 1. 디자인 완성하기 먼저 ui의 디자인을 그려보겠습니다. 버튼0 버튼1 버튼2 내용0 내용1 내용2 간단히 부트스트랩에서 복사해 Detail 페이지에 넣었습니다. 코드의 eventKey 속성은 버튼마다 자유롭게 작명하고, defaultActiveKey는 페이지 로드 시에 효과를 줄지 결정하는 부분입니다. 2. UI의 상태를 저장할 state 만들기 function Detail(){ let [탭, 탭변경] = useState(0) (생략) } 3. state 상태에 따라 UI 내용 작성 function Detail(){ let [탭, 탭변경] = useState(0) return ( ) } function TabCont..
■ ajax 이번에는 서버에 요청하여 쇼핑몰 사이트에 상품 카드를 추가해보겠습니다. 우선 서버에 GET 요청, POST 요청을 날리면 브라우저가 새로고침되기 때문에, ajax를 활용하여 새로고침 없이 데이터를 주고 받을 수 있도록 만들겠습니다. axios 라이브러리 ajax로 GET/POST 요청을 하려면 3가지 방법이 있습니다. XMLHttpRequest 쓰기, fetch() 쓰기, axios와 같은 외부 라이브러리 쓰기 우리는 axios를 라이브러리를 설치하여 서버에 데이터를 요청해보겠습니다. npm install axios 먼저 터미널을 열어 axios를 설치합니다. import axios from 'axios' 그리고 상단에 axios를 임포트하면 준비 끝입니다. get 요청하기 function ..
Lifecycle 컴포넌트에는 Lifecycle라는 개념이 있습니다. 1. 컴포넌트의 생성은 mount 2. 컴포넌트의 재렌더링은 update 3. 컴포넌트의 삭제는 mount 입니다. 컴포넌트의 Lifecycle은 중간에 특정 코드를 실행할 수 있다는 특징이 있습니다. 그리고 특정 코드들을 장착할 때 사용하는 것을 Lifecycle hook 이라고 부릅니다. Lifecycle hook class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Deta..
styled-components 설치 styled-components는 외부 라이브러리로 스타일링에 도움을 주는 기능을 제공합니다. 우선 터미널에서 아래의 설치 코드를 입력해 라이브러리를 설치해줍니다. // 설치 npm install styled-components 그리고 styled-components를 임포트해주면 준비 끝입니다. import styled from 'styled-components' 사용법 먼저 div 박스에 스타일을 주겠습니다. 1. styled.div만들기 2. 오른 쪽에 백틱기호`` 쓰고 안에 css 스타일을 넣기 3. 그러면 컴포넌트가 남는데 변수에 저장해서 사용하기 padding: 20px에 color: grey 라는 스타일을 주려면 아래와 같이 만들 수 있습니다. impor..
URL 파라미터 먼저 만들어두었던 상세페이지에 상품명을 넣어보겠습니다. shoes state의 상품 정보들을 props를 사용해 detail 컴포넌트에 넣는 것이 목표입니다. (Components.js) {props.shoes[id].title} {props.shoes[0].content} {props.shoes[0].price}원 주문하기 ) } 하드코딩했던 props.shoes[0] 을 url 파라미터에 맞춰서 변경하는 것이 목표입니다. 그러기 위해서 사용할 수 있는 것이 useParams 입니다. 상단에 uesParams을 임포트하고 컴포넌트에 id라는 변수에 저장하여 사용합니다. 그러면 /:url파라미터 자리에 입력했던 url파라미터 값을 가져올 수 있습니다. 주의 사항으로는 url 파라미터를 잘..
navigate 지난번에 이어서 리액트 라우터에 대해서 계속 알아보겠습니다. 우선 이번에 해볼 것은 component를 담은 js 파일을 폴더를 만들어서 묶어보겠습니다. 그래서 이렇게 routes라는 폴더를 만들고, Component.js 라는 파일을 폴더 안에다가 넣어줬습니다. 그리고 이어서 알아볼 것은 useNavigate 입니다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom' 먼저, 이번에 배울 useNavigate와 Outlet을 import 해옵니다. useNavigate는 페이지 이동 기능을 구현하고 싶을 때 사용합니다. Link 써도 페이지 이동이 가능하고, useNavigate 써도 페이지 이동이 가능..
■ 리액트 라우터 리액트 라우터(react-router)란? 보통 사이트를 만들 때 html 파일을 여러 개 만들어서 페이지를 나눕니다. 그런데, 리액트에서는 html 파일을 하나만 사용합니다. 그리고 다른 페이지를 요청하면 내부의 를 갈아치워서 보여줍니다. 이런 작업을 도와주는 외부 라이브러리가 react-router-dom 입니다. 리액트 라우터(react-router) 설치 및 사용 방법 1. 터미널에서 npm install react-router-dom@6 입력해서 설치 2. index.js 파일로 들어가서 셋팅하기 // 상단에 import 추가 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(do..
