작성자 : @이인석 / 작성 일시 : 2022년 9월 16일
해당 문서는 인턴 과제 수행 중 Vue를 사용하여 게시판 개발을 정리한 글입니다. Front-End를 처음 시작하며 찾은 부분과 느낀 점 위주로 내용부터 작성했습니다.
컴포넌트(Component)는 재사용이 가능한 각각의 독립된 모듈을 말한다. 컴포넌트를 조합하여 화면을 구성할 수 있고, 조합을 통해 구현하기 때문에 일괄적인 패턴으로 개발이 가능하다. 또한 Vue에서 컴포넌트는 하나의 Vue 인스턴스로 Vue 라이프사이클 훅과 Vue의 기능을 이용할 수 있다.
그리고 부모 컴포넌트에서 자식 컴포넌트로 props로 데이터를 전달할 수 있는데, 자식 컴포넌트에서는 부모 컴포넌트에서 받은 데이터를 참조할 수 있지만 수정할 수 없다. 이는 많은 자식 컴포넌트에서 값을 수정해버리면 부모 컴포넌트의 데이터의 변화를 추적할 수 없기 때문에 데이터의 흐름의 파악을 쉽게하기 위해서 데이터의 흐름을 단방향으로 하기 위함이다.
Vue는 싱글 파일 컴포넌트(SFC)로 하나의 .vue 파일에 템플릿, 로직, 스타일을 하나의 파일로 묶어낸 파일 형식을 취하고 있다.
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<script>
export default {
data() {
return {
greeting: '안녕 Vue!'
}
}
}
</script>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
예시와 같이 템플릿, 로직, 스타일을 각각 분리하고, 캡슐화할 수 있다는 장점이 있고 각 코드별로 책임을 분리하여 작성되기 때문에 직관적이라는 장점이 있다.
라우터 간의 데이터 교환은 제한적이다.
라우터는 주소 자체를 변경하기 때문에 각 라우터 사이의 데이터 교환이 어렵다. 라우터에서 값을 전달하는 방식은 두 가지가 있다.
컴포넌트 간의 데이터 교환처럼 props를 사용할 수 없다. 그래서 라우터 간의 데이터 교환은 제한적일 수 밖에 없고 위 구조의 경우에 중첩 라우터를 사용해서 SubMenu 항목에 따라 주소를 변경하여 내부에 보여지는 페이지를 변경하고 있는데, 이 때문에 컴포넌트 간의 데이터 교환이 어려워지는 단점이 있다.
컴포넌트 전체 반복
위 구조에서 게시글을 렌더링하기 위해서 Board 컴포넌트 자체를 연속해서 반복하여 Board 전역으로 관리되는 데이터나 메소드에 대한 정보가 인스턴스에 따라 반복되고 있다.