vue.js 공부
기본적으로 vue js 에서는 script태그에서 js를 작성하는데 , 뷰 만의 여러가지 요소들이있습니다 .
첫번째로 가장 많이 쓰는것은 data() 인데 , 이 데이터 함수 안에 state를 집어넣어서 ,
template , 즉 HTML을 작성하는 부분에서 {{}}중괄호 두개로 감싸면 쉽게 바로 접근을 할 수 있습니다 .
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
data() {
return {
msg : 'hello world'
}
}
}
</script>
그리고 method : {} 를 data 밑에 추가하여 함수를 작성하여 사용할수 있고 , state값에 접근을 하려면 this.를 붙여서 사용 하면 됍니다 .
computed라는 속성도 있는데 , 이 속성을 사용하면 한번 연산된 자료를 재 연산할 필요 없이 재 사용할수 있어서
효율적입니다 .
하지만 이 computed는 읽기전용 이라고 할 수 있습니다 . 무슨 뜻이냐면 어떤 함수를 통해 이 computed가 연산한 자료에 접근을해서 변형을 시도하려고 하면 , 변형을 시키지 못합니다 . 따라서 computed는 값을 얻어내는 용도로만 사용합니다 . getter방식이라고도 합니다 .
getter방식은 값을 얻어내는 용도로 사용할수 있는것을 말합니다 .
setter방식은 값을 지정하는 용도로 사용할수 있는 것을 말합니다 .
data안에 들어있는 state들은 getter , setter 둘다 가능합니다 .
리액트와 다른점
뷰를 다루면서 가장 기본적인 컴포넌트를 생성하고 , 그 컴포넌트에 prop을 넘겨서 컴포넌트안에서 v-for를 돌려 리스트를 렌더링을 했습니다 .
그 과정에서 여러가지 리액트와 다른점이 느껴졌는데 ,
첫째로 뷰는 img파일을 렌더링할때 require라는 뷰의 속성인지 아니면 그 js의 import와 비슷한것을 뜻하는건지는 모르겠으나 require라는 함수가 꼭 필요하더라구요 , 계속 img파일이 렌더가 안돼서 구글링을해봤더니 require를 써야 한다고 합니다 .
두번쨰로 emit이라는 vue의 속성을 사용하니까 자식 컴포넌트에서 부모 컴포넌트로 prop을 반대로 쏴주더라구요 ??
이것은 매우 혼란스러운 일이었습니다..
왜냐하면 리액트에서는 state를 한방향으로만 흘려주기때문에 절때 자식 컴포넌트에서 부모컴포넌트로 쏴줄수가 없거든요 .
이를 양방향 , 단방향 바인딩이라고 하는데 . 기본적으로 뷰는 양방향 바인딩을 지원합니다 .
리액트는 양방향을 지원하지않고 단방향 바인딩을 채용했구요 ,
그런데 리액트는 양방향처럼 비슷하게 트릭을 사용할수가 있습니다 .
이를 lifting-state-up이라고 하는데요 , 그냥 공통으로 state가 필요할때는 가장 상위 부모에서 state를 선언하여 자식 컴포넌트들에게 내려주는것 뿐입니다 . 단순하고 항상 쓰는 방법이죠 .
저는 뷰를 공부하면서 느낀점이 뷰는 좀 뷰의 문법에 제한을 많이 두면서 개발을 진행시키는거 같습니다 .
그게 좋을수도 안좋을수도있는데 , 팀단위에서 개발할때는 스트럭쳐가 지정이 되어있으니 좋을수 있겠다는 생각이 드는 반면에 , 리액트의 자유로운 개발을 주로 하다보니 그 환경에 익숙해져 뷰는 살짝 답답한 감이 있는것 같더라구요 .
물론 그또한 리액트의 단점이 될수 있는게 같은 프로그램을 짜더라도 사람마다 전부 다 다르게 너무나 많은 방법이 존재하기 때문에 다른사람이 제 코드를 보는 입장에서 이해하기 어려울 것 같습니다 .
조건부 렌더링
<h1 v-if='awesome'>Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
awesome이라는 상태값이 true면 위 h1을 출력하고 , 아닐시 밑 값을 출력하는 뷰의 문법입니다 .
리액트로 한다면
<h1>{ awesome ? 'React is awesome!' : 'Oh no' }</h1>
이렇게 삼항 연산자를 대입해서 사용할수 있겠네요 .
Fragment
리액트에서처럼 뷰에서도 가장상위 wrapper가 존재해야 하는데요 , 그 안에 html 구조를 짤수가 있습니다 .
div를 사용해도 되지만 그방법보다 리액트에서는 React.Fragment를 많이 사용했습니다 .
Fragment를 사용하게 되면 html구조에서 Fragment는 보이지않고 (DOM자체를 안 그리는것 같습니다).
Fragment 자식 요소들만 렌더가 되는데요 , html의 구조를 방해하지않으면서 wrapping을 할수 있는 요소로 사용을
자주 했었습니다 .
뷰로 작업을 하던 도중 뷰에서 Fragment를 사용해야하는 상황이 오게되어 구글링을 해보니
<Fragment></Fragment>
이라는 태그가 있더라구요 , 유용하게 자주 쓸것 같습니다 .