[TIL]23.04.03 props, Route

props

▪ Props는 Properties의 줄임말
상속하는 부모 component로 부터 자식 component에 데이터등을 전달
▪ props는 읽기 전용으로 자식 component입장에서 변하지 않는다. (부모 component에서 state를 변경)

▪ calendarData.json 생성

[
    { "date": 1, "day": "SUN", "todos": [] },
    { "date": 2, "day": "MON", "todos": [] },
    { "date": 3, "day": "TUE", "todos": [] },
]

▪ Calendar.jsx에 import calendarData

{calendarData.map((v, i) => {
	return <Date key={i} date={v.date} day={v.day} todos={v.todos} />;
})}

▪ calendarData.map (value, index)
▪ Date(component)에 celendarData.json value값 선언
▪ 부모 컴포넌트(Calendar.jsx)로 부터 받은 props -> 자식 컴포넌트(Date.jsx)
props.(value)

function function Date(props) {
return (
	 {props.date}
     {props.todos}
)
}
export default Date;

삼항연산자

▪ 삼항(조건) 연산자는 js에서 피연산자를 받는 유일한 연산자이다.

• (조건문) ?(물음표) :(콜론)
  조건문이
  ?(참일 경우 실행할 표현식)
  :(조건문이 거짓일 경우 실행할 표현식)
  ▪ if ... else 문의 대체제로 빈번히 사용

applp === "red" ? true : false

Route

▪ 설치
npm i react-router-dom

index.js
import BrowserRouter

App.jsx
import Routes, Route

BrowserRouter : history API를 활용해 URL과 UI를 동기화 하는 라우터
Route : 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트 함수를 렌더링
▪ path = "경로설정"
▪ element={컴포넌트}