<aside> 🧑‍💻

BoardDetailView.vue같은 경우는 라우트에 설정된 페이지 컴포넌트

/boards/:boardId 경로로 요청했을 때, RouterView에 렌더링된다.
이때, Vue Router는 BoardDetailView.vue에 props를 전달할 수 있다

</aside>

• boards.js

  export function getBoardById(id) {
    const numberId = parseInt(id)
    return boards.find((item) => item.id === numberId)
  }
  

  <aside> 🧑‍💻

  boardId로 조회 함수 정의

  boards배열에있는 데이터를 id로 조회. item.id와 일치하는 id를 찾는 api

  </aside>

const form = ref()

const fetchBoard = () => {
  const data = getBoardById(boardId)
  form.value = { ...data }
}

<aside> 🧑‍💻

함수를 만들어서 boardId로 해당 board 데이터를 가져오고, 반응형 데이터 form에 전개연산자(...)를 사용하여 객체복사해 할당합시킵니다. 이는 원본 boards에서 데이터가 변경되더라도, form이 참조하지 않고, 독립적이게 됨!

</aside>

• 템플릿에 렌더링

  

  

  <aside> 🧑‍💻

  템플릿에 하드코딩 되어있던 상세페이지 렌더 링됐슴다

  </aside>

ref() 🆚 reative()

🤔 프리미티브 타입은 ref(), 객체나 배열은 reactive()아닌가?

<aside> 🧑‍💻

ref()로 선언하게되면, form.value = { ...date }처럼 객체 할당을 할 수 있다! 하지만 reactive()로 선언하게 되면, Object로 할당된다( 반응 형 잃음 )

</aside>

아니면 객체 할당이 아니라 하나씩 넣어줘야 한다. form.title = data.title, form. …

	ref()	reactieve()
+	객체 할당	.value 필요없음
-	.value로 접근해야함	객체 할당 가능은 함!
( 반응형 끊김! )
특이사항	레퍼런스, 프리미티브 가능
일관성 유지!	레퍼런스 타입만 할당 가능

게시판 목록의 아래에 게시판 상세보기

<aside> 🧑‍💻

BoardDetailView.vue를 재활용 해보자

</aside>

<aside> 🧑‍💻

route.params.boardId가 없기 때문에 제대로 구현되지 않음. 이때, props로 boardId를 대신 넘겨주는 것이다.

</aside>