Frontend (26) 썸네일형 리스트형 [Vue3] 상태 관리 라이브러리 Pinia Vue 컴포넌트는 이미 반응형 상태(=== 데이터)를 관리하고 있다.컴포넌트 구조의 단순화- 상태(State): 앱 구동에 필요한 기본 데이터- 뷰(View): 상태를 선언적으로 매핑하여 시각화- 기능(Actions): 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 {{ count }}=> '단방향 데이터 흐름'의 간단한 표현상태 관리의 단순성이 무너지는 시점"여러 컴포넌트가 상태를 공유할 때" 1) 여러 뷰가 동일한 상태에 종속되는 경우- 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것- 하지만 계층 구조가 깊어질 경우 비효율적, 관리가 어려워짐 2) 서로 다른 뷰의 기능이 동일한 상태를 변경시켜야 하는 경우- 발신(emit)된 이벤트를 통해 상태의.. [Vue3] Vue Router로 페이지 이동하기 Vue Router: Vue 공식 라우터https://v3.router.vuejs.org/kr/Vue Router 추가- Vite로 프로젝트 생성 시 Router를 추가한다.- 서버 실행 후 Router로 인한 프로젝트 변화를 확인할 수 있다.-> Home, About 링크에 따라 URL과 새로 렌더링되는 화면이 바뀐다.- 프로젝트 구조도 변화된 것을 확인할 수 있다. -> App.vue 코드가 바뀌고, router 폴더 및 views 폴더가 생성된다. 1) App.vue- RouterLink: 페이지를 다시 로드하지 않고 URL을 변경하고 URL 생성 및 관련 로직을 처리한다. HTML의 a 태그를 렌더링한다.- RouterView: URL에 해당하는 컴포넌트를 표시한다. 어디에나 배치하여 레이아웃에.. [Vue3] 컴포넌트 간 통신 (props, emit) 동일한 사진 데이터가 한 화면에 다양한 위치에서 여러 번 출력될 수 있다.하지만 해당 페이지를 구성하는 컴포넌트가 여러 개라면 각 컴포넌트가 개별적으로 동일한 데이터를 관리해야 할까?그렇다면 사진을 변경해야 할 때 모든 컴포넌트에 대해 변경 요청을 해야한다.=> "공통된 부모 컴포넌트에서 관리하자" 부모는 자식에게 데이터를 전달(pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(emit events)Props- 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성- 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩(one-way-down binding) 형성부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됨자식 컴포넌트 내부에서 props를 .. [Vue3] Lifecycle Hooks Lifecycle Hooks: Vue 인스턴스의 생애주기 동안 특정 시점에서 실행되는 함수-> 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 함 1. Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행하기 2. 반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트된 후 특정 로직을 수행하기 Add 1 Count: {{ count }} {{ message }} 이외에도 다양한 hooks 함수들이 있다.https://vuejs.org/api/composition-api-lifecycleLifecycle Hooks 특징- Vue는 Lifecycle Hooks에 등록된 콜백 함수들.. [Vue3] watch watch() 함수는 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출한다.watch 구조watch(variable, (newValue, oldValue) => { // do something}- variable: 감시하는 변수watch 예시감시하는 변수에 변화가 생겼을 때 기본 동작 확인하기 Add 1 Count: {{ count }} 감시하는 변수에 변화가 생겼을 때 연관 데이터 업데이트하기 Message length: {{ messageLength }} [Vue3] 리스트 렌더링 (v-for) v-for 특징- alias in expression 형식의 특수 구문을 사용하여 반복되는 현재 요소에 대한 별칭(alias) 제공 {{ item.text }} - 배열에서 인덱스에 대한 별칭을 지정할 수 있음 {{ index }} / {{ item.name }} - 객체에서는 키, 인덱스에 대한 별칭을 지정할 수 있음 {{ index }} / {{ key }} / {{ value }} 여러 요소에 대한 v-for 적용- template 요소에 v-for을 적용하여 하나 이상의 요소에 반복 렌더링 할 수 있음 {{ item.name }} {{ item.age }} .. [Vue3] 조건부 렌더링 (v-if, v-show) v-if: 표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링 - 'v-else' directive를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다. true일때 보여요 false일때 보여요 토글 - 'v-else-if' directive를 사용하여 v-if에 대한 else if 블록을 나타낼 수 있다. Alice입니다 Bella입니다 Cathy입니다 아무도 아닙니다. 여러 요소에 대한 v-if 적용- v-if는 directive이기 때문에 단일 요소에만 연결 가능- template 요소에 v-if를 사용하여 하나 이상의 요소에 대해 적용할 수 있다. (v-else, v-else-.. [Vue3] Computed Property computed() : 계산된 속성을 정의하는 함수.미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다. computed를 적용하지 않을 경우- 템플릿이 복잡히지며 todos에 따라 계산을 수행하게 된다.- 이 계산을 템플릿에 여러 번 사용하는 경우에 반복이 발생한다. 남은 할 일 {{ todos.length > 0 ? "아직 남았다" : "퇴근!" }} computed 적용- 반응성 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산 남은 할 일 {{ restOfTodos }} computed 특징- 반환되는 값은 computed ref이며 일반 re.. 이전 1 2 3 4 다음
