React6일차-React router dom2

오늘은  주소 뒤에 이상한 숫자 붙어서 다른 창을 보여주는것을 해보겠다

만들었던 폴더에서 vscode창을 열어주자  그다음 src/App.js로 들어가자

여기 routes 내부에 <Route path="/profile/:id" element={<Profile />} />  추가해주자

/profile/이 뒤에 뭐가 붙어있으면 그걸 id라는 요소에 저장하고profile이라는 컴포넌트를 뛰워주겠다는 의미이다.

그럼 이제 page/Profile.jsx를 가보자

이제 뒤에 붙는  주소마다 내용이 달라지는 확인 하기 위해

import { useParams } from "react-router-dom"; 이걸 젤 위에쓰고

(react-router-dom 안에서useParams이거만꺼내서 쓰겠다는 의미이다)

const { id } = useParams();이걸 리턴위 함수내부에 쓰고

(useParams() 내부에서 id만꺼내서 id라는 이름으로 쓰겠다는것이다.)

return 내부 내용을

<div>
      <h2>Profile 페이지 입니다.</h2>
      {id && <p>id는{id}입니다.</p>}
</div>

이렇게 변경해주겠다.

{id &&<p>id는{id}입니다.</p>} : id가 있으면 오른쪽 내용을 출력하겠다는 의미이다.

{id}는변수id / id는 문자 id

 

npm start 를 터미널에 치고 엔터 누르면 창이 뜰것이다.

이렇게뜬다 기본Home화면이다.

http://localhost:3000/profile 이렇게 주소뒤에 /profile을 추가하면 이렇데 된다.

하지만 뒤에 id가 없으므로 아까 추가한

<p>id는{id}입니다.</p> 

이거는 출력되지 않는다.

이제 뒤에 id를 붙여서 주소를 바꺼보자

이렇게 뒤에 주소를 추가하니까 뒤에꺼를 id로 인식하고 아까 입력했던것을 출력한다.

이렇게 이걸 이용해서 페이지를 추가로 안만들고 다른페이지를 만들수 있게 되었다.

{id &&<p>id는{id}입니다.</p>} 이게 왜이런지 한번 이해해보자 &&이거는 논리 연산자 중에 and를 뜻한다.

그리고 즉 두개다 만족해야 된다는 뜻이다. 그래서 젤첫번째꺼가 false 즉 만족하지 않으면 두번째꺼는 확인도 하지않고 종료한다. 즉 id가 있으면 오른쪽에꺼를 실행하고 없으면 오른쪽이 읽혀지지가 않는다.

그리고 왼쪽 id는 {}이게 없는데 왜 변수이냐 라고 할수 있는데 그건 <p>때문이다.

기본적으로 <p>안에는 다 문자이다. 하지만 변수를 넣어주기 위해{}이게 생긴것이다.

즉 왼쪽 id가 정상 {id} 는<p>때문에 구별을 위해 {}이게 들어간것이다.

오늘은 이상여기서 마치겠다.

공부하다가 버전이 바뀐지 얼마 안되면서 작동이 안되서 작동되게 고친다고 많이 못했다ㅠㅠ

이전 버전 내용을 따라하다가 안되서 고친다고 시간이 많이 걸렸다 ㅎㅎ