[React]리액트 공부 - 쇼핑몰1

2022 코딩애플 리액트 강의

📂Bootstrap

1. ‘react bootstrap’ 검색
2. 터미널에 ‘npm install react-bootstrap bootstrap’ 입력
3. ‘react bootstrap’ 이 사이트에서 원하는 것을 검색 ex)button
4. 원하는 결과의 코드 복붙하기

import { Button, Navbar, Container, Nav } from "react-bootstrap";

function App() {
  return (
    <div className="App">
      <Button variant="primary">Primary</Button>
      <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>
  );
}

---

📂Insert Image

로컬 이미지

import bg from "./img/bg.jpg";

<div className="main-bg" style=></div>;

주소 이미지

<img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/230x230ex/image/rs_quotation_api/hiwibsjq/23620c4467f84eaeb36198a0cf1a690d.jpg" />

---

📂import & export

data.js

let a = 10;

export default a;

App.js

import b from "./data.js";

---

📂router

1. 터미널에 ‘npm install react-router-dom@6’ 입력
2. import {Routes, Route, Link} from ‘react-router-dom’;
3. 문법

  <Routes>
    <Route path="/" element={<div>메인 페이지</div>}></Route>
    <Route path="/detail" element={<div>상세 페이지</div>}></Route>
    <Route path="/about" element={<About></About>}>
      <Route path="member" element={<div>멤버임</div>}/> //'/about/member'
      <Route path="member" element={<div>위치정보임</div>}/>
    </Route>
  </Routes>

  <Link to="/">홈</Link>
  <Link to="/detail">상세페이지</Link>

---

📂useNavigate

페이지 이동 도와줌

1. import {useNavigate} from ‘react-router-dom’;
2. 문법

  <Nav.Link onClick={()=> navigate('/detail') }>Cart</Nav.Link>
  <Nav.Link onClick={()=> navigate('-2') }>Cart</Nav.Link> //뒤로 2페이지

---

📂useParams

id값 지정해줌

App.js

<Route path="/detail/:id" element={<Detail shoes={shoes}></Detail>} />

Detail.js

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

function Detail(props) {
  let { id } = useParams();

  return (
    <div className="container">
      <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[id].content}</p>
        <p>{props.shoes[id].price}</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  );
}

export default Detail;

---

📂styled-components

1. 터미널에 'npm install styled-components' 입력
2. import styled from ‘styled-components’;
3. 문법

let YellowBtn = styled.button`
  background: ${(props) => props.bg};
  color: black;
  padding: 10px;
`;
function Detail(props) {
  return (
    <div className="container">
      <YellowBtn bg="blue">버튼</YellowBtn>
    </div>
  );
}

4. 단점

• JS파일 매우 복잡해짐
• 중복 스타일은 컴포넌트간 import 할텐데 CSS와 다를 바가 없음
• 협업시 CSS 담당의 숙련도 이슈

---

📂useEffect

1. 컴포넌트의 Lifecycle

• 페이지에 장착되기도 하고 (mount)
• 가끔 업데이트도 되고 (update)
• 필요 없으면 제거되고 (unmount)

2. useEffect 안에 적는 코드들

• 어려운 연산
• 서버에서 데이터 가져오는 작업
• 타이머 장착하는 거

3. import { useEffect } from ‘react-router-dom’;

4. 문법

import { useEffect } from "react-router-dom";
let [alert, setAlert] = useState(true);

useEffect(() => {
  setTimeout(() => {
    setAlert(false);
  }, 2000);
  return () => {
    clearTimeout(a); //기존 데이터 요청은 제거
  };
}, []);

5. 정리

useEffect(() => {}); // 재렌더링마다
useEffect(() => {}, []); // mount 시 1회
useEffect(() => {}, [count]); // mount 시, 특정 state가 변경될 시
useEffect(() => {
  return () => {};
}); // unmount 시 1회

---

📂axios

1. ajax 요청

axios.get("링크").then((결과) => {
  console.log(결과.data);
  let copy = [...shoes, ...결과.data];
  setShoes(copy);
});

2. 동시에 ajax 요청 여러개

Promise.all([axios.get("링크1"), axios.get("링크2")]).then((결과) => {
  console.log(결과.data);
  let copy = [...shoes, ...결과.data];
  setShoes(copy);
});

---

📂tab UI

1. 문법

import { Nav } from "react-bootstrap";

function Detail(props) {
  const [tab, setTab] = useState(0);

  return (
    <div>
      <Nav variant="tabs" defaultActiveKey="link0">
        {" "}
        //기본으로 눌려있을 버튼
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(0);
            }}
            eventKey="link0"
          >
            버튼0
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(1);
            }}
            eventKey="link1"
          >
            버튼1
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTab(2);
            }}
            eventKey="link2"
          >
            버튼2
          </Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent tab={tab} />
    </div>
  );
}

function TabContent(props) {
  if (props.tab == 0) {
    return <div>내용0</div>;
  }
  if (props.tab == 1) {
    return <div>내용1</div>;
  }
  if (props.tab == 2) {
    return <div>내용2</div>;
  }
}

function TabContent({ tab }) {
  //같은 코드(간결ver.)
  return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab];
}

---

📂전환 애니메이션

1. 방법

• 애니메이션 동작 전 className 만들기
• 애니메이션 동작 후 className 만들기
• className에 transition 속성 추가
• 원할 때 2번 className 부착

2. 문법

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

function TabContent({ tab }) {
  const [fade, setFade] = useState("");

  useEffect(() => {
    setTimeout(() => {
      setFade("end");
    }, 100); //시간 차 두기
    return () => {
      setFade("");
    };
  }, [tab]);
  return (
    <div className={"start " + fade}>
      {" "}
      //2번 className 부착
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]}
    </div>
  );
}