[React 코딩애플🍎] 프로젝트 shop 1-20

이다영·2024년 6월 28일

Map React Route ajax axios bootstrap nested Routes redux useEffect useParams

React

목록 보기

10/31

🍎 shop 폴더 생성

npx create-react-app 프로젝트명 shop 파일 만들기
npm run start 미리보기 창 띄우기

🍎 React-Bootstrap 라이브러리

html, css로 버튼, 메뉴같은 UI들을 직접 디자인 하지않고 레이아웃을 생성할 수 있다.

⭐ 1. React-Bootstrap 설치방법

➡️ npm install react-bootstrap bootstrap
(작성법이 바뀔수도 있기 때문에 사이트 들어가서 확인하는 것이 좋음)

⭐ 2. 사용 전 사용방법 2가지

(1) ➡️import 'bootstrap/dist/css/bootstrap.min.css';
(App.jsx에 작성)

(2) ➡️ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
( index.html 파일의 <head> 태그 안에 넣어주기)

⭐ 3. 부트스트랩 사용할 때 `import` 하기

대문자로 시작하는 컴포넌트들은 전부 import 해와야 한다 . 뒤에 오는 컴포넌트들은 import 안 해도 된다

import "./App.css";
import { Navbar, Container, Nav } from "react-bootstrap"; //사용되는 컴포넌트 다 import 해야 한다

function App() {
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}

export default App;

🍎 import export (컴포넌트 내보내기)

컴포넌트의 코드가 길어질 것 같거나, 다른 데이터의 파일의 코드가 길어질 것 같을 때에는 파일을 따로 만들어서 관리하는 게 편하다

<파일 한 개에 여러개 데이터를 내보내기 할 때>

//해당 파일
const data1 = 10;
const data2 = 20;

export { data1, data2 }; //변수명을 적어주면 된다(변수가 여러개 일 때는 export만 적기)

//import 불러올 파일
import { data1, data2 } from "./data"; //{중괄호} 사용해서 import 하기

🍎 프롭스를 문자열에 더할 때

<img src={"https://codingapple1.github.io/shop/shoes" + i + ".jpg"}
 width="80%"/>

🍎 map 돌릴 때 인자 i ?

{
  shoes.map((a, i) => {
   return <Card shoes={shoes[i]} i={i + 1} />;  
})}

i + 1인 이유는 map 인자 i가 0부터 시작하는 정수여서 이미지 1,2,3 이 보여지게 하려면 +1을 해주면 된다
➕ map안에 작성하는 것 보다는 아래처럼 작성해주는 것이 가독성에 좋다

<img src={"https://codingapple1.github.io/shop/shoes" + (i + 1) + ".jpg"}
 width="80%"/>

🍎 React에서 페이지 나누는 법

리액트를 사용하지 않을 때에는 html파일을 따로 만들어서 내용을 채워 넣었는데 리액트에서는
Single Page Application, index.html 하나만 사용한다 예를 들어서 detail페이지에 접속한다고 했을 때 /detail 적어주게 되면 컴포넌트를 보여주는 것이다 !

🍎 React 라우터 설치/세팅

< 2번까지는 터미널에 작성하기 >

^C^C일괄 작업을 끝내시겠습니까 (Y/N)? y
\파일경로\shop> npm install react-router-dom@6

src > index.js파일 > <App />컴포넌트 <BrowserRouter>로 감싸주기 (아래예시 참고)

<BrowserRouter>
 <App />
</BrowserRouter> //이렇게 작성했을 시 자동으로 상단에 불러와지는 경로

// import { BrowserRouter } from 'react-router-dom'; //라이브러리 불러오는 방법 !

//➕추가내용 : `import App from './App';` 이런식으로 ./App 불러와지는 경로는 내가 만든 js파일이며
// `'react-router-dom'` 이렇게 불러와지는 건 라이브러리라고 생각하면 된다

App.js 파일 상단 > import { Routes, Route, Link } from "react-router-dom"; 적기

⭐ React 라우터 사용

Route는 페이지이고 Routes로 감싸줘야 한다. <Route path="/url경로" element={ <보여줄html> } /> 이렇게 작성하면 되는데 경로 /만 적었을 경우에는 메인페이지이다

➕ 메인페이지에서 보여야 할 내용들은 element 안에만 넣어주면 메인페이지 내용은 메인페이지에서만 보여지기 때문에 상세페이지에 접속했을 때 메인페이지 내용을 볼 수 없다 ! (내용을 적을 땐 컴포넌트화 해서 적기)
버튼을 만들 때에는 아래처럼 작성

<Link to="/">홈</Link> //메인페이지로 이동하는 홈버튼
<Link to="/detail">상세페이지</Link> //상세페이지로 이동하는 버튼
// Link는 a태그 처럼 보여진다 그게 싫으면 미리 만들어 놓은 nav 태그에 onClick을 넣어 아래처럼 작성해줄 수 도 있다

<Nav.Link
  onClick={() => {
  navigate("/detail");
  }}
 >
   Detail
 </Nav.Link>
// navigate의 뜻은 아래 참고

🍎 Hook useNavigate ?

페이지 이동을 도와주는 것 !
navigate는 숫자로도 이동이 가능하다
navigate(2) 숫자 넣으면 앞으로 2번 가기 기능, navigate(-1) 뒤로 1번 가기 기능을 쓸 수 있다

🍎 404페이지 ?

유저가 다른 경로로 접속했을 때 "없는 페이지입니다" 나타내 줄 수 있는 방법

http://localhost:3000/detail //detail 페이지 주소
http://localhost:3000/detail4546 // 페이지 주소 뒤에 알수없는 문자, 숫자가 붙을 때

<Route path="*" element={<div>없는 페이지</div>} /> 
// 이 외에 모든 것인 "*"을 붙이면 다른 경로로 접속했을 때 없는 페이지라고, 화면에 나타나게 된다

🍎 서브 경로 Nested Routes ?

<Route>안에 <Route>를 넣을 수 있는 방법

<장점>

작성할 때 간단하게 작성이 가능하다
Nested Routes 접속 시에 Element 2개가 보인다
페이지 이동이 쉽다

<Route path="/about" element={<About />} />
<Route path="/about/member" element={<About />} />
<Route path="/about/location" element={<About />} />
 // 이런 방법으로 작성해도 되지만 Nested Routes 방법을 아래처럼 사용하게 되면 ...

<Route path="/about" element={<About />}>
 <Route path="member" element={<About />} />
 <Route path="location" element={<About />} />
</Route>
 // Nested Routes 방법으로 서브 경로를 만들 수 있다

const About = () => {
  return (
    <div>
      <h4>회사 정보</h4>
      <Outlet><Outlet> //Nested routes안의 element를 보여주는 자리
    </div>
  );
};

<Route path="/about" element={<About />}>
 <Route path="member" element={<div>경영진 소개</div>} />
 <Route path="location" element={<div>회사 위치<div>} />
</Route>

Element에 <About /> 컴포넌트만 넣게 되면 Route 내용이 같으니까 About 컴포넌트에 Outlet을 넣어서 내용을 넣어주면 화면에 두 개의 Element가 보여진다(해당 경로(member, location)로 접속해 있을 때 서로 다른 내용이 보여지는 부분 ! )

🍎 페이지 여러개 만들고 싶을 때

⭐ < URL 파라미터 사용 >

페이지가 100개라고 했을 때 <Route>를 100개 만들고 구분하기 위해서 하나하나 번호를 매번 부여할 수는 없다 그래서 URl파라미터를 사용하면 되는데 문법은 파일경로 뒤에 /:id 를 붙여주면 된다.
/: 이렇게 사용하면 "아무 문자"를 의미함. 뒤에는 작명을 해주면 된다 (ex. id)
➕ 아래 코드처럼 /: 사용하게 되면 똑같은 내용만 보이게 된다 페이지마다 다른 내용을 보이게 하고 싶다면 ... 아래 참고 !

<Route path="/detail/:id" element={<Detail shoes={shoes} />} />
//id는 작명한 것임

하나의 컴포넌트로 각각의 페이지마다 다른 내용을 보이게 하고 싶다면 useParams() hook을 사용하면 된다 !
➕ 사이트에 파일 경로 뒤에 /0, /1, /2 이렇게 입력해주면 해당 data에 맞게 보인다 하지만 사용자가 아무거나 입력했을 때에는 화면에 보이지 않게 된다. 그럴 땐 ❗조건문을 사용하면 된다❗

  const data = [ //상품 3개에 대한 data
  { //검정신발
    id: 0, // 영구번호로 고정 !
    title: "White and Black",
    content: "Born in France",
    price: 120000,
  },

  {//빨강신발
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
  },

  {//회색신발
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
  },
];

export default data;

// 상품페이지 Detail 컴포넌트  
const Detail = ({ shoes }) => {
  const { id } = useParams(); // 내가 작성했던 파일 경로에 작명했던 id값을 불러옴 !
  
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{shoes[id].title}</h4> //id 값을 적어준다 
          <p>{shoes[id].content}</p>
          <p>{shoes[id].price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
};

export default Detail;

⚠️ 오름차순/내림차순 버튼이 있다고 가정했을 때 배열의 순서가 바뀌어서 0번째 검정신발이 화면에 보였으면 좋겠으나 2번째 회색신발이 보여지게 되는 경우가 있다 이걸 방지하기 위해서는 data에 있는
❗상품데이터의 id값을 영구번호로 고정❗해놓으면 된다

// Detail 컴포넌트의 전체 코드

import { useParams } from "react-router-dom"; //

const Detail = ({ shoes }) => {
  const { id } = useParams();
  const products = shoes.find((product) => product.id === parseInt(id)); 
  // find함수로 data의 id와 동일한 것 찾아주기

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{product.title}</h4> 
          <p>{product.content}</p>
          <p>{product.price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
};

export default Detail;

위에 변수 product를 만들어서 컴포넌트 내용을 product.id(data의 key값)을 적어주면 배열의 순서가 아무리 변경되어도 영구번호가 고정되어 있어서 화면에 정상적으로 잘 작동이 된다

⚠️ 오류 (product 값 undefined)

const products = shoes.find((product) => product.id === parseInt(id));

parseInt를 사용한 이유는 앞에서 경로뒤에 /:id가 문자열이기 때문에 숫자===문자 엄격 비교하면 에러가 난다 그렇기 때문에 parseInt를 사용해서 문자열을 숫자로 변경을 해줬다 == 느슨비교를 하면 parseInt를 적어주지 않아도 괜찮지만 비교를 할 때에는 ===을 사용하는 것이 좋다

🍎 `Nested Routes` 사용할 때 많이 사용하는 `styled-components` 라이브러리

⭐ <styled-components설치>

npm install styled-components 설치
import styled from 'styled-components'; import 해서 불러오기
하나의 컴포넌트이기 때문에 App컴포넌트 외부에 작성하고, 첫글자는 대문자로 한다

//작성방법
const YellowBtn = styled.button`
  background: yellow;
  color: black;
  padding: 10px;
`; 

<YellowBtn>버튼</YellowBtn> // style이 입혀진 버튼을 렌더링 할 수 있다

<styled-components 장점>

CSS 파일에 따로 작성 할 필요없이 Js파일에서 작성 가능하다
페이지 로딩시간이 단축된다 (html에 <style> 넣은 것과 같다)

<styled-components 단점>

JS 파일이 복잡해진다(컴포넌트가 styled인 지 일반 컴포넌트인 지 구분하기 어려워진다)

🍎 CSS파일, JS 파일에 간섭받지 않는 방법

모듈화 기능 사용하면 된다

// css 작명방법
컴포넌트명.module.css 
// import 해서 다른 js파일에서 사용하면 그 스타일들은 컴포넌트명.js 파일에만 적용된다

🍎 비슷한 UI 일 경우 props 사용예시

⭐ 노란색버튼과 오렌지색 버튼이 필요 할 경우

const YellowBtn = styled.button`
  background : ${ (props) => props.bg }; //props 전달방법
  color : ${ (props) => props.bg == 'yellow' ? 'white' : 'black' }; //삼항연산자 사용도 가능하다
  padding : 10px;
`;

<div>
   <YellowBtn bg="yellow">Yellow</YellowBtn>
   <YellowBtn bg="orange">Orange</YellowBtn>
</div>

🍎 Lifecycle(라이프사이클)

리액트 컴포넌트에는 생명주기가 있다 생명주기란 컴포넌트가 생성, 사용, 소멸 될 때까지의 일련의 과정을 말한다
생명주기 안에서는 특정시점에 자동으로 호출되는 메서드가 있는데,, 그것을 Life Cycle 이벤트라고 한다
Life Cycle 이벤트란 컴포넌트 동작을 제어하고, 작업수행을 향상 시키는 사용자 정의 로직을 구현해내는 것을 의미한다

<라이프 사이클의 장점>

불필요하게 렌더링 되는 것을 막을 수 있다
원하는 시점에 서버에서 데이터를 가져오거나, DOM 이벤트 또는 다른 프론트엔드 라이브러리와 통합할 때 사용 가능하다

❗<라이프 사이클의 이벤트 분류>❗: 생성(Mount)➡️사용(Update)➡️소멸(Unmount)

✔️ 생성(Mount) : 한 번만 실행

화면에 처음 렌더링이 된다

✔️ 사용(Update) : 여러번 실행

컴포넌트의 속성, 값이 변경될 때마다 렌더링이 된다

✔️ 소멸(Unmount) : 한 번만 실행

DOM 노드에서 제거 할 때 발생하고, 컴포넌트가 화면에서 사라진다

🍎 Lifecycle hook (useEffect)

✍️ 리렌더링마다 코드 실행

useEffect(() => { 
    //컴포넌트가 mount & update시 실행된다
  });

console.log 출력 시 두번 출력이 되는데 그 이유는 index.js에 <React.StrictMode>라는 태그가 있으면 두번 출력이 된다
➕ useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update시 실행이 된다 그런데 왜 useEffect를 사용하냐면 ? useEffect 안에 적은 코드는 html 렌더링 이후에 동작을 하는데 html이 먼저 빠르게 보이고 싶은 사이트를 만들고 싶다면 아래 이미지 참고 !

💡 컴포넌트 생성(Mount) 1회만 실행

useEffect(() => { 
   // 실행할코드
  }, []);

불필요한 리렌더링을 막아준다

💡 useEffect 안의 코드 실행되기 전에 항상 실행

useEffect(()=>{ 
  return ()=>{
   // 실행할코드
  }
})

clean up function. 기존코드를 없애고, 실행 시킬 수 있는 장점이 있다

💡 컴포넌트 소멸(Unmount) 1회 실행

useEffect(()=>{ 
  return ()=>{
  // 실행할코드
  }
}, [])

생성(mount)시 실행이 안 되고, 소멸(Unmount) 시 실행된다

💡 state1이 변경될 때만 실행

useEffect(()=>{ 
 // 실행할코드
}, [state1])

🍎 setTimeout

몇 초 후에 코드를 실행하고 싶을 때 사용한다

setTimeout( ()=>{  
  1초 후 실행할 코드 
}, 1000); // 1000은 1초

🍎 서버와 통신

서버란 데이터를 요청하면 데이터를 보내주는 것을 말한다 예를 들어서 youtube서버의 동영상을 요청했을 때 동영상 데이터를 보내주는 프로그램을 말한다
서버에 데이터를 요청할 때 (Get/Post)방법과 URL 자료 형식을 지켜서 보내야 한다
Get요청은 데이터를 가져올 때, Post 요청은 데이터를 전송할 때 사용된다
서버와 주고받을 때에는 문자만 주고받을 수 있다
아래 예시를 보면 array object도 주고 받는데 "따옴표" 를 사용하면 배열이나 객체도 주고받기가 가능하다 이것을 JSON 이라고 한다

< GET 요청하는 방법 >

🍎 Ajax 데이터 요청

새로고침 없이 GET/POST 요청이 가능하다
< Ajax 사용, 3개의 방법 >
(1) XMLHttpRequest
(2) fetch()
(3) axios (외부 라이브러리이고, 가장 많이 사용된다)

🍎 axios 라이브러리 사용

⭐ 1. axios 설치

➡️ npm install axios

⭐ 2. App.jsx에 import 해오기

➡️ import axios from 'axios';

⭐ 3. axios Get요청 예시

데이터를 보낼 때 axios.get('URL경로')
데이터를 출력해서 확인 할 때 .then(() => {})
데이터 요청에 실패 했을 때 .catch(() => {})

<button onClick={() => {
  axios.get('https://codingapple1.github.io/shop/data2.json') //url 불러오기
   .then((result) =>{ // get요청한 데이터를 매개변수로 받아온다
     //console.log(result.data) // get요청 결과는 url로 가져온 데이터를 보여줌
     const copy = [...shoes, ...result.data]; //다른데이터 추가
     setShoes(copy); //shoes 변경함수에 copy변수를 넣어줌
   }) //출력해서 확인 할 때 .then을 사용
   .catch(() => { // 데이터 요청에 실패했을 때 .catch 사용
     console.log('요청에 실패했습니다') //URL이 잘못됐을 때 보여질 코드
   })
}}>더보기</button>

동시에 여러개 ajax Get요청 예시

Promise.all([axios.get('/url1'), axios.get('/url2')])

🍎 Tab UI 만들기

(1) html/css로 미리 디자인 해놓기
(2) UI 현재 상태를 저장 할 state 하나 만들기
(3) state에 따라서 Ui가 어떻게 보일 지 작성

//html/css로 미리 디자인 해놓기

//App.css
.start {
  opacity: 0;
}
.end {
  opacity: 1;
  transition: opacity 0.5s;
}

//Detail.jsx
<Nav variant="tabs" defaultActiveKey="link0"> //defaultActiveKey는 기본으로 첫 화면에 보여지는 버튼
  <Nav.Item>
    <Nav.Link eventKey="link0">버튼0</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link1">버튼1</Nav.Link>
  </Nav.Item>
    <Nav.Item>
  <Nav.Link eventKey="link2">버튼2</Nav.Link>
  </Nav.Item>
</Nav>

//UI 현재 상태를 저장 할 state 하나 만들기
const [tab, setTab] = useState(0); // 0, 1, 2를 사용해 내용을 변경하게 할 것

삼항연산자는 조건을 연달아 사용이 불가능 하다 그렇기 때문에 컴포넌트 밖에 컴포넌트를 따로 만들어서 그 안에 조건문을 넣어 사용한다 아래 코드 참고하기

const TabContent = ({tab}) => {
  if (tab === 0) {
    <div>내용0</div>;
  } else if (tab === 1) {
    <div>내용1</div>;
  } else if (tab === 2) {
    <div>내용2</div>;
  }
};

<TabContent tab={tab}/> // 외부에 만든 컴포넌트이기 때문에 프롭스 전달을 해야한다

function TabContent({tab}){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][탭]
} //코드 축약해서 사용도 가능하다

//state에 따라서 Ui가 어떻게 보일 지 작성
const TabContent = ({ tab }) => {
  const [fade, setFade] = useState("");  //초기값 빈 문자열
  useEffect(() => { 
    setTimeout(() => { //0.1초 후에 class end를 fade안에 넣기
      setFade("end");
    }, 100);
    return () => {
      setFade(""); // useEffect코드 실행 전에 end의 값이 ''로 된다
    };
  }, [tab]);

  return (
    <div className={`start ${fade}`}> //fade변수 넣는방법
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]}
    </div>
  );
};

setTimeout을 사용한 이유는 리액트 18버전 이상부터는 automatic batch 기능이 생겼는데 state 변경함수가 연달아서 여러개 처리되어야 한다고 가정했을 때 변경함수를 다 처리하고 마지막에 합쳐서 한 번만 리렌더링이 된다 그래서 setTimeout 이용해서 'end', '빈 문자열' 시간차를 두었다

//탭기능 onClick 버튼 setTab(해당번호) 넣어주기
 <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(0); // 0번
            }}
            eventKey="link0"
          >
            버튼0
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(1); // 1번
            }}
            eventKey="link1"
          >
            버튼1
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(2); // 2번
            }}
            eventKey="link2"
          >
            버튼2
          </Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent tab={tab} />

🍎 Context APi

props 전송 없이 state 공유가 가능하다

< Context APi 단점 >

state 변경 시 불필요한 것들 까지 리렌더링 된다

나중에 컴포넌트 재사용이 어려워질 뿐만 아니라 다른페이지에서 재사용 했을 경우에는 이상하게 작동할 수도 있음(state 로 받아온 변수의 값이 없다고 나올 수도 있다)
➕이러한 단점들 때문에 context보다 외부 라이브러리인 redux를 많이 사용한다

⭐ <Context 사용방법>

(1) createContext() 만들기

export const Context1 = createContext(); //상단에 import도 해야함

(2) Context로 원하는 컴포넌트 감싸기

<Route
  path="/detail/:id" element={
   <Context1.Provider value={{ 재고, shoes }}> // value안에 사용 할 state 공유
     <Detail shoes={shoes} /> // 디테일 컴포넌트에서는 state 자유롭게 사용 가능해짐
   </Context1.Provider>
  }/>

(3) Context 안에 있던 state 사용

//Detail.jsx
import { useEffect, useState, useContext } from "react"; //useContext 불러오기
import { Context1 } from "../App"; //만들어둔 컴포넌트 import 해오기

const { 재고 } = useContext(Context1); //[10, 11, 12]state 불러옴

Detail 컴포넌트 자식인 TabContent 에서도 useContext를 쓰게되면 사용이 가능하다

🍎 Redux로 장바구니 페이지 만들기

Redux란 props 없이 state 를 공유하게 도와주는 라이브러리이다
Redux를 설치하면 js 파일 하나에 state들을 보관할 수 있는데 모든 컴포넌트에 state 사용이 가능하다 (사이트가 커지면 사용할 수 밖에 없어서 중요하다 ! )

<장바구니페이지 만들기>

// Cart.jsx
import { Table } from "react-bootstrap";

const Cart = () => {
  return (
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경하기</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>안녕</td>
          <td>안녕</td>
          <td>안녕</td>
        </tr>
      </tbody>
    </Table>
  );
};

export default Cart;
// App.js파일에 import 및 컴포넌트화 하기

⭐ <Redux 설치>

(1) 설치방법 ➡️ npm install @reduxjs/toolkit@1.8.1 react-redux
(2) package.json 파일 > "react", "react-dom" 항목의 버전을 확인한다 버전은 18.1 버전 이상인 지 확인한다
(3) 버전 확인 끝나면 터미널에 입력 ➡️ npm install

⭐ <Redux 세팅>

store.jsx 파일을 만들어서 세팅해두기
store.jsx 파일의 용도는 state를 보관하는 파일이다

// store.jsx

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

index.js 파일 > Provider, store.jsx 파일 import 해오기

//index.js

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}> //store 가져오기
      <BrowserRouter>
        <App /> //App은 물론 자식 컴포넌트들은 store.js에 있던 state를 마음대로 사용이 가능하다
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

⭐ store.js, state 보관

//store.jsx

import { configureStore, createSlice } from "@reduxjs/toolkit"; 

const user = createSlice ({ //state 생성 (useState와 비슷하다)
  name: 'user', // state 이름
  initialState : 'kim' //state 값
})
export default configureStore({ // state 등록
  reducer: {
    user: user.reducer, // 작명: state생성.reducer
    cart: cart.reducer,
  },
});

등록한 state는 모든 컴포넌트가 자유롭게 사용이 가능하다

⭐ store.js, state 사용방법

//Cart.jsx

import { useSelector } from "react-redux"

  const a = useSelector((state) => { 
    return state; // store에 있던 모든 state를 가져온다
  });

⭐ store.js, state 변경

<Redux의 state 변경하는 방법>
(1) store.jsx에 state변경 해주는 함수 만들기
(2) export 하기
(3) 필요할 때 import 해오고, dispatch()로 감싸서 사용해야 한다

//(1) store.jsx에 state변경 해주는 함수
let user = createSlice({
  name : 'user',
  initialState : 'kim', // state 값은 'kim'
  reducers : { //오타 안 생기게 주의
    changeName(state){ // 안에서 export 불가
      return 'john ' + state // 버튼 클릭 시 'john kim' 출력
    }
  }
}) 

//(2) export 하기
export const { changeName } = user.actions; //오른쪽 자료를 변수로 내보내기

//Cart.jsx

//(3) 필요할 때 import 해오고, dispatch()로 감싸서 사용해야 한다 
import { useDispatch, useSelector } from "react-redux";
import { changeName } from "../store";

const Cart = () => {
  const state = useSelector((state) => state); //매개변수로 넘겨주는 state는 전체 state를 불러옴
  const dispatch = useDispatch(); //store.jsx 요청을 보내주는 함수
<button
  onClick={() => {
   dispatch(changeName()); //dispatch(state변경함수())
  }}
  >
    +
</button>

state변경 해주는 함수 dispatch(changeName())를 적었다고 해서 저 자리에서 함수를 바로 실행해주는 게 아니라 버튼 클릭 시 store.jsx 파일에 함수를 실행해달라고 요청하는 코드이다

🍎 Redux state가 배열 또는 객체라면 ?

let user = createSlice({
  name : 'user',
  initialState : 'kim', 
  reducers : { 
    changeName(state){ 
      state.name = 'park' // 버튼 클릭 시 park로 변경된다 
    }
  }
})

< state 변경함수가 여러개 필요할 때? >

파라미터 문법을 이용한다

const user = createSlice({
  name: "user",
  initialState: { name: "kim", age: 20 },
  reducers: {
    increase(state, action) {
      state.age += action.payload; //payload는 택배, 화물 이런뜻 
    },
  },
});

출처

코딩애플 리액트

이다영

이전 포스트

[React] 버튼 클릭 시 색상 변경 예제

다음 포스트