[KB IT’s Your Life 7기] KB 국민은행 부트캠프 TIL 5편_Pinia (프론트엔드 교육 후기 + 부트캠프 한달차 후기)

https://www.youtube.com/watch?v=D54StAZFUrc&list=PL4fGSI1pDJn5S09aId3dUGp40ygUqmPGc

 

 

안녕하세요.

림도림입니다.

 

Today I Learned
프론트엔드 교육 후기

벌써 KB IT's Your Life 부트캠프를 진행한 지 한달이 되었네요.
한달동안 웹 인터페이스 구축을 위한 프론트엔드 수업을 진행하고 
지금은 스켈레톤 프로젝트를 진행중인데요.

정말 하루하루 복습의 중요성을 깨닫고 있습니다.

아직 프론트엔드에서 배운 것들이 익숙하지 않은것들이다보니
프로젝트를 진행하면서도
'이런 부분들을 많이 복습 해야겠다' 와 같은 생각들이 많이 들었습니다!

 

 

 

피니아의 등장

프로젝트의 아키텍처가 복잡해지는 팁핑 포인트(Tipping Point)에 도달하면, 개발자는 필연적으로 데이터의 흐름이라는 

거대한 벽에 부딪힙니다.

컴포넌트 깊숙이 데이터를 전달하기 위한 'Prop Drilling'이나, 여러 화면에서 흩어진 상태를 동기화하기 위해 소모되는

에너지는 생각보다 막대합니다.

Vue 3의 공식 표준으로 자리 잡은 Pinia는 단순히 Vuex의 대체재를 넘어, 상태 관리의 새로운 패러다임을 제시합니다.

 

 

Pinia는 단순히 데이터를 쌓아두는 창고가 아닙니다. 이는 State, Getters, Actions라는 명확한 단방향 흐름을 가진 정교한 아키텍처입니다. 특히 Vue 3의 Composition API와 완벽하게 궤를 같이한다는 점이 핵심입니다.

 

스토어 내부에서 ref는 State가 되고, computed는 Getters, 그리고 일반 함수는 Actions가 됩니다. 이 구조의 진정한 가치는 비즈니스 로직의 분리에 있습니다. 백엔드 API 호출과 같은 복잡한 로직을 Actions로 전이시킴으로써, UI를 담당하는 컴포넌트는 오직 '보여주는 역할'에만 집중하며 극도로 가벼워질 수 있습니다.

 

Pinia는 상태(State)를 중심으로 액션(Action)을 통해 상태를 변경하는 직관적인 단방향 흐름을 따릅니다.

Vue 컴포넌트는 Actions를 호출하여 상태를 변경하고, 변경된 State와 Getters는 다시 컴포넌트에 바인딩되어 화면을 갱신합니다.

 

Pinia를 도입한 초보 개발자들이 가장 흔히 저지르는 실수는 자바스크립트의 편리한 문법인 '구조 분해 할당(Destructuring)'을 무분별하게 사용하는 것입니다.

// ❌ 반응성이 깨지는 위험한 접근
const { count, doubleCount } = store 

// ✅ 반응성을 유지하는 전략적 접근
import { storeToRefs } from 'pinia'
const { count, doubleCount } = storeToRefs(store)

// 액션(함수)은 구조 분해해도 안전합니다.
const { increment } = store

이러한 현상이 발생하는 이유는 Pinia 스토어가 내부적으로 reactive() 컨텍스트로 감싸져 있기 때문입니다.

스토어의 속성을 구조 분해하는 순간, 해당 데이터는 반응형 프록시 객체 밖으로 튕겨져 나와 일반 변수로 전락합니다.

따라서 State와 Getter를 컴포넌트에서 자유롭게 사용하려면 반드시 storeToRefs()를 거쳐야 합니다.

반면, 함수인 Actions는 반응성 유지가 필요 없으므로 언제든 구조 분해하여 직접 호출해도 무방합니다.

 

 

많은 개발자가 Vue의 기본 기능인 provide/inject가 있는데 왜 굳이 Pinia를 써야 하는지 묻곤 합니다.

그 결정적인 차이는 개발자 경험(DX)과 직관성에 있습니다.

provide/inject 방식은 별도의 반응형 컨텍스트를 제공하지 않습니다. 따라서 주입받은 데이터를 사용할 때마다 

.value를 통해 실제 값에 접근해야 하는 번거로움이 따릅니다.

// Provide/Inject 방식: .value의 늪
const todoList = inject("todoList")
todoList.value.find(item => item.id === 1)

// Pinia 방식: 직관적인 직접 접근
const store = useTodoListStore()
store.todoList.find(item => item.id === 1)

Pinia 스토어는 내부적으로 reactive() 처리가 되어 있어, 컴포넌트에서 스토어 인스턴스를 통해 접근할 때 별도의 .value 없이도 데이터에 즉시 접근하고 수정할 수 있습니다. 이는 코드의 가독성을 높일 뿐만 아니라 유지보수 시 발생할 수 있는 실수를 원천적으로 차단합니다.

모든 스토어의 값을 무조건 실시간으로 구독하는 것이 항상 정답은 아닙니다. 진정한 전략가는 상황에 따라

반응형 연결을 끊을 줄도 알아야 합니다.

// EditTodo.vue에서의 전략적 선택 (반응형 연결 끊기)
const todoList = todoListStore.states.todoList
const matchedTodoItem = todoList.find((item) => item.id === route.params.id)

// 원본을 지키기 위한 일회성 복사본 생성
const todoItem = reactive({ ...matchedTodoItem })

 

이처럼 "이 데이터의 변화를 지금 즉시 화면에 반영해야 하는가?"라는 질문을 던짐으로써

불필요한 렌더링을 방지하고 더 정교한 상태 관리를 수행할 수 있습니다.

 

오늘의 요약

 

 

 

 

 

오늘의 요약

오늘의 TIL은 여기까지!