[TIL] 2023-04-03 DAY13

---

리액트(+테일윈드)

GIT 주소 : https://github.com/dowoo303/react-props_router

---

• 각종 팁

1. index.css에 들어가서
   
   @layer을 이용하면 쉽게 함수를 만들어서 중복을 제거할 수 있다.
   
   

• 의문점

1. 리액트에서 props 이용해서 상대경로로 이미지 넣는법
   해결방법 -> <img src={${process.env.PUBLIC_URL}/${image}} alt="project" />
   리액트에서는 위와 같은 방법을 이용해야함(public폴더에 image 넣어야함)
   -> 리액트는 프레임워크이므로 각자의 률이 있음

프롭스(props)

프롭스를 사용하면 반복적인 작업을 줄일 수 있다.

형태 (card 여러개 생성을 쉽게 할 수 있음)

// 컴포넌트.jsx
function Card(props) {
  return <div className={`${props.color} w-40 h-60`}>{props.cardName}</div>;
}
export default Card;
----------------------------------------------------------------------------------
// main.jsx
import Card from "./components/cardA";
function App() {
  return (
    <div className="min-h-screen p-12 grid grid-cols-3">
      <Card cardName="A" color="bg-red-100" />
      <Card cardName="B" color="bg-orange-100" />
      <Card cardName="C" color="bg-yellow-100" />
      <Card cardName="D" color="bg-green-100" />
      <Card cardName="E" color="bg-blue-100" />
      <Card cardName="F" color="bg-purple-100" />
    </div>
  );
}
export default App;

구조분해

프롭스를 구조분해하여 파라미터를 각각 따로 분해하여 사용할 수도 있다.

형태

// 컴포넌트.jsx
function Card({ color, cardName }) {
  return <div className={`${color} w-40 h-60`}>{cardName}</div>;
}
export default Card;

객체{}는 순서가 상관없지만, 배열[]은 순서가 매우 중요하다.

map 함수

배열을 하나하나 탐색하면서 반복(for)작업을 진행해준다. -> 반복되는 컴포넌트에 사용

형태 map(값, 인덱스)

• clrendar.jsx
  
  
  
• date.jsx
  

삼항 연산자

간단한 if문과 유사하다.

형태

• 기본 형태 (조건 ? 참이면 실행 : 거짓이면 실행)
  
  
  
• 중복 가능 (조건 ? 참 : 조건 ? 참 : 거짓)
  
  -> 쌍다옴표 대신 {백틱, 백틱}으로 감싸기 가능 -> `(백틱)형태로 하면 JS를 사용할 수 있다.

리액트 라우터

• 설치 명령어
  npm i react-router-dom
  
  
• 사이트
  https://reactrouter.com/en/main

형태

• BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지 한다.
• Routes : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
• Route : path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.