첫째주 #3 React 기초- 동적 url, useParmas

react-router-dom 버전

5와 6버전 차이를 참고할 링크.
https://reactrouter.com/en/6.11.1/upgrading/v5

동적 url (dynamic url)

APP Component
<BrowserRouter>
  <Routes>
    <Route path="/movie/:id" element={<Detail />} />
      <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

Movie Component

<h2>
  <Link to={`/movie/${id}`}>{title}</Link>
</h2>

• path에 :id 라고 적은 부분이 동적 url 만들어줌
• 변수의 이름은 id가 된다
• url에 movie/~whatever~ 입력시 Detail로 이동
• 유저를 /movie/변수 의 경로로 보낼 수 있다

url의 값 useParams로 불러오기

• URL : movie/12345
• 보여진 화면은
• Detail 컴포넌트에서 useParams import하기

const x = useParams();
// consol.log(x) => { id : '12345'}

const {id} = useParams();
// console.log(id) => 12345

• url 변수의 값을 얻었다!

---

계산기

1. input과 select > option과 button 태그 만들기
2. 각 값을 저장할 useState() 만들기
3. input과 select의 onChange 속성에 넣을 함수 만들기
   • 입력된 숫자를 업데이트할 함수. e.target.value 사용
4. button에 onClick 속성에 넣을 함수 만들기
   • 입력된 값을 가져와서 이렇게 저렇게 계산하고 값 setState로 저장
5. 버튼을 누르면 버튼 밑에 계산 결과 보이게 하기

if 와 switch

주로 if를 썼는데 switch 문도 사용해보자.

  const [value1, setValue1] = React.useState("");
  const [value2, setValue2] = React.useState("");
  const [operator, setOperator] = React.useState("");
  const [answer, setAnswer] = React.useState("");

const handleCalculation = () => {
  let answer;

  if (operator == "+") {
    answer = value1 + value2;
  } else if (operator == "-") {
    answer = value1 - value2;
  } else if (operator == "/") {
    answer = value1 / value2;
  } else if (operator == "*") {
    answer = value1 * value2;
  }

  setAnswer(answer);
};

  function handleCalculation() {
    let answer;

    switch (operator) {
      case "+":
        answer = Number(number1) + Number(number2);
        break;
      case "-":
        answer = Number(number1) - Number(number2);
        break;
      default:
        answer = "";
    }

    setResult(answer);
  }

---

JS 문제풀이 시 참고

let input = "3 3 6"

let b1 = input.split('\n') // ['3 3 6']
let a1 = Number(input[0].split(' ')[0]); // 3

let b2 = input.split(' ') // ['3', '3', '6']
let a2 = Number(input[0]); // 3