map 함수

• 자바스크립트 배열에서 반복되는 요소를 처리할 때는 map 함수를 사용

const fruits = ["apple", "banana", "orange", "kiwi"];

fruits.map((v, i) => {
  console.log(`${i + 1}번째 과일은 ${v}입니다.`);
});

• map 함수를 사용하면 배열의 요소 하나하나를 탐색
• v는 배열의 값, i는 배열의 index 번호
• map함수는 배열의 인자를 하나씩 가져온 후 재 가공하여 또 다른 배열을 생성

return을 통한 새로운 배열 만들기

const array = [1, 2, 4, 8];

console.log(array);

// i가 쓰이지 않는 경우에는 v만 작성합니다.
const squareArray = array.map((v) => {
  return v * v;
});

console.log(squareArray);

• i(인덱스)를 쓰지 않는 경우에는 생략이 가능
• v를 가공해서 return을 할 경우 새로운 배열을 만들 수 있음

React - map()

• React에서는 반복되는 컴포넌트를 생성할 때, map 함수를 사용
• calendar 예제 참고

삼항 연산자

{조건} ? {참} : {거짓}

조건이 참이면 {참} 실행
조건이 거짓이면 {거짓} 실행

React Router

SPA

• SPA(Single Page Application)
  
• SPA : 리액트에서 페이지를 구성하는 기술
• SPA는 처음 서버에 접속했을 때 모든 정적 리소스(HTML, CSS, JS를 다운 받습니다.
• 그 다음 갱신이 필요한 부분에 대한 데이터(JSON)만 전달 받아서 갱신
• SPA는 이름에서도 알 수 있듯이 단일 페이지로 구성

장점	단점
사용자에게 네이티브 앱을 쓰는 것과 같은 경험을 제공합니다.	최초 접속시 페이지 구성에 필요한 모든 데이터를 요청하므로 초기 구동속도가 느려집니다.
사용자가 데이터 요청시 필요한 데이터만을 갱신하므로 불필요한 새로고침이 발생하지 않습니다.	처음 받는 웹 페이지의 소스코드가 거의 비어있으므로 SEO(검색 엔진 최적화)문제가 발행하게 됩니다.

Routing

React에서 페이지를 나누려면 라우팅이라는 기술을 사용해야함

설치 명령어

npm install react-router-dom

Router 사용법

<BrowserRouter>
  <div className="flex justify-center items-center">
    <Hearder />
    <div>hello</div>
    <div>Joe</div>
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/a" element={<B />} />
      <Route path="/b" element={<A/>} />
    </Routes>
    <Footer />
  
  </div>
</BrowserRouter>

1. App.jsx 가장 바깥 컴포넌트를 BrowserRouter로 감쌉니다.
2. 그 다음 모든 페이지에 공통적으로 적용되는 요소를 작성합니다. (스타일용 <div>, Header, Footer)
3. 라우팅이 되는 페이지들을 Routes 안에 배치합니다.
4. Route에 경로 path와 페이지 element를 배치합니다.

페이지 이동

* Header.jsx

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

function Header() {
  return (
    <div className="bg-red-100 flex justify-center items-center h-20">
      <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>
      <Link to="/b">
        <button className="bg-yellow-300 px-4 py-2 mx-2 rounded">B</button>
      </Link>
      <Link to="/c">
        <button className="bg-green-300 px-4 py-2 mx-2 rounded">C</button>
      </Link>
    </div>
  );
}

export default Header;

• Link로 button을 감싸줍니다. (꼭 버튼이 아니여도 됨)
• to로 이동하고자하는 경로를 입력.