[TIL] 23/04/03 React

HyeongA·2023년 4월 3일
TIL

TIL

목록 보기
12/25
post-thumbnail

DAY : 13
ReactDay : 3

git clone을 이용한 Setting

: git clone으로 작성된 코드를 받아온 후, remote git을 전부 지우는 과정
1. git clone 다운받을git주소 파일명
ex) git clone https://github.com/h662/create-react-app-tailwindcss.git .
2. cd 파일명
3. git remote -v
4. rm -rf .git ; 전부 지워줌
(git remote remove origin : git 원격만 지워짐, 커밋 남아있음)
5. git init
6. git add .
7. git commit -m "first commit"
8. git branch -M main
9. npm install ; gitignore된 파일들을 설치
10. npm run start

1. props

image.jpg1

왼쪽 사진에서 Card의 색상을 다르게 지정하고자 한다.

지금까지 배운 방법으로는 Card의 components를 색상별로 총 6개 작성해야 한다. color를 제외하면 나머지 코드는 동일하다.

코드의 반복을 props를 통해 효율적으로 해결할 수 있다.

Props의 장점
1. component의 재사용성이 좋다.

  1. component의 생산속도가 높다.
  • 사용법
    : props는 부모로 부터 값(문자열, 숫자, boolean, 배열, 객체 등)을 받아와 컴포넌트를 구성합니다.

    App.jsx (부모파일)
import Card from "./components/Card";
function App() {
  return (
    <div>
      <Card color="bg-red-100" name="A" />
      <Card color="bg-orange-100" name="B" />
      <Card color="bg-yellow-100" name="C" />
    </div>
  );
}
export default App;

Card.jsx (자식파일) : {props.변수}로 사용

function Card(props) {
return <div className={`${props.color} w-30 h-30`}>{props.name}</div>;
}
export default Card;

➕ 구조 분해 할당

2. map 함수

  • 반복되는 요소를 처리할 때 사용 (component반복도 가능)
  • map 함수를 사용하면 배열의 요소 하나하나를 탐색할 수 있다.
  • v는 배열의 값, i는 배열의 인덱스 번호를 의미
  • i를 쓰지 않는 경우에는 생략 가능
  • v를 가공해서 return을 할 경우 새로운 배열을 만들 수 있다.

    App.jsx (부모파일)
    import Square from "./components/Square";
const colors = ["red", "orange", "yellow", "green", "blue", "purple"];
function App() {
return (
  <div>
    {colors.map((v, i) => {
      return <Square key={i} color={v} />;
    })}
  </div>
);
}
export default App;
    components/Square.jsx (자식파일)
     function Square({ color }) {
return <div className={`w-20 h-20 bg-${color}-300`}>{color}</div>;
}
export default Square;
    : map함수로 중복은 제거하고 서버로부터 받은 데이터를 컴포넌트로 변경해서 사용

❗ 삼항연산자

? 기준으로 참일 경우 앞쪽 조건, 거짓일 경우 뒤쪽 조건을 적용

props.day === "SUN"
          ? "bg-red"
          : props.day === "SAT"
          ? "bg-yellow"
          : "bg-blue"

: day의 값이 SUN인지 판별 → 참이면 red, 아니면 SAT인지 판별 → 참이면 yellow, 거짓이면 blue

3. router

  • 라우팅(Routing)?
    : 다른 경로를 따라 다른 페이지를 보여주는 것. 즉, url주소에 따라 다른 화면을 출력하는 것을 의미
  • React Router?
    : 리액트는 SPA이며, view만 담당한다. 다른 페이지를 출력하여도 url이 모두 동일하다. SPA에서 페이지를 나누어 작업하기 위해서 라우팅(다른 url과 연결)기술이 필요하다. 이때 React Router를 사용하여 페이지를 이동한다.

    ➕ Single Page Application (SPA)는 단일 페이지로 처음 서버에 접속했을 때 모든 정보를 가지지고 온다. (SPA,SSR,SSG 설명 : https://engineer-mole.tistory.com/341)
  • 사용법
    1. npm install react-router-dom (= npm i react-router-dom)
    2. 가장 바깥 컴포넌트를 <BrowserRouter>'로 감쌈
    3. 라우팅이 되는 페이지들을 Routes 안에 배치
    4. Route에 경로 path와 페이지 element를 배치

    App.jsx (부모 파일) 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Main from "./pages/Main";
import A from "./pages/a";
function App() {
  return (
    <BrowserRouter>
      <div className="min-h-screen flex flex-col">
        <Header />
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/a" element={<A />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}
export default App;

Link를 사용하여 페이지 연결
5. Link로 button을 감쌈 ( 버튼이 아니어도 됨)
6. to에 이동하고자 하는 경로 입력

Header.jsx (자식파일)

import { Link } from "react-router-dom";
function Header() {
    return (
	<div>
	  <Link to="/">
		<button className="bg-red-300 px-4 py-2 mx-2 rounded ">메인 페이지 입니다</button>
      </Link>
      <Link to="/a">
        <button className="bg-orange-300 px-4 py-2 mx-2 rounded">A 페이지 입니다</button>
      </Link>
    </div>
  );
}
export default Header;
  • BrowserRouter? Routes? Route?
    1. BrowserRouter
      : react-router-dom의 라우터는 <BrowserRouter>와 <HashRouter> 두가지가 있다. <BrowserRouter>는 HTML5의 history API를 활용하여 UI를 업데이트하며 동적 페이지에 사용된다. 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어준다.
    2. Routes
      : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트를 렌더링 시켜주는 역할을 한다. Route Config라는 경로 객체 트리를 생성한다. Route는 Routes안에서만 유효하다. Routes를 사용하지 않고 Route를 나열하면 조건에 맞는 Route를 모두 보여주게 된다.
    3. Route
      : 라우팅에 대한 결과를 의미하며 path와 element를 통하여 경로를 지정한다. path가 현재url과 일치하면 element가 렌더링 된다.

도움받은 링크

profile
HyeongA
Today I Learned
이전 포스트

[TIL] 23/03/31 React

다음 포스트

[TIL] 23/04/04 React

0개의 댓글