Vue의 기본 문법 2

이전 포스팅에 이어서, 계속해서 기본적인 사항에 대해 공부해보자.
모든 과정은 Vue.js 공식 가이드를 토대로 진행된다.

Conditional binding

v-if 디렉티브를 통해 조건에 따라 컴포넌트를 출력할 수 있다.
아래와 같이 v-if, v-else-if, v-else 디렉티브가 존재하며,
다른 언어에서 조건문을 사용하듯이 조건을 걸어 사용할 수가 있다.

Simple example

위의 HTML 태그에서 v-model 디렉티브를 통해 animal 변수에 값을 넘긴다.
해당 변수의 값에 따라 출력되는 span 태그가 달라지는 예제이다.

아래와 같이, 선택된 라디오 버튼에 따라 결과가 달라짐을 확인할 수 있다.

Array example

배열을 순회할 때에, 조건을 걸어 원하는 요소만 어떻게 뽑아낼 수 있을까?
두 가지 방법을 통해서 뽑아 낼 수 있다.

첫번째로는 아래와 같이 filter 함수를 통해서 뽑아낼 수 있다.
filter 함수 내에서 람다 함수를 통해 조건을 걸어 뽑아내는 것이다.

선언된 데이터에 대해, selectedType에 맞는 Snack 종류만 뽑는다.

그럼 그 결과로는 아래와 같이 출력됨을 확인할 수 있다.
내가 선택하는 타입에 따라 다른 unordered list가 출력된다.

두번째로는 바로 위에서 학습했던 v-if를 사용하는 방법이 있다.
주의할 점은, v-if는 v-for와 같이 사용할 수가 없다는 점이다!
따라서, 아래와 같이 v-for 내에 v-if를 사용해야만 한다.

하지만 이 방식에는 큰 문제가 있다!
결과가 아래와 같이 조건에 부합하지 않으면 빈 DOM을 생성하게 된다.
우리가 원하는 결과는 이런 형태가 아니다!

이 때, 우리는 template 태그를 이용해서 원하는 결과를 얻을 수 있다.
아래와 같이 template 태그에 v-for를 걸어 반복문을 돌리고,
내부에 li 태그를 v-if 속성과 함께 집어넣어 조건문을 돌린다.

그 결과 아래와 같이 우리가 원하는 형태로 li가 출력됨을 확인할 수 있다.

v-show

v-if와 동일한 동작을 하는 v-show라는 디렉티브도 존재한다.
둘은 컴포넌트를 실제로 생성하는가, 생성하지 않는가 밖에 차이가 나지 않는다.

v-show는 조건이 거짓일 때 display: none 속성을 부여하는 동작을 한다.
즉, 컴포넌트는 실제로 생성되지만 CSS의 속성만 바뀌어 보이지 않는 것이다.

Conditional class binding

이전에 학습했던 v-bind 디렉티브에서, 그냥 지나쳤던 부분이 있다.
바로 v-bind 디렉티브를 통한 Class, Style 조건부 binding인데,
사용하다 보니, 꽤나 중요한 부분이라고 생각되어 추가로 정리하려 한다.

Class example

현재 작업중인 졸업과제에서, 실제로 사용한 예시를 들어보도록 하겠다.
회원가입 시, 비밀번호 확인 절차에서 비밀번호가 다르면 아래와 같이 CSS가 변한다.

해당 기능을 구현하기 위해서, v-bind:class 디렉티브를 이용했다.

:class = "{class 이름: boolean 값}"과 같은 형태로 사용이 가능하며,
변수로 선언한 boolean 값이 참일 경우, 해당 class로 CSS가 변경이 된다.
위의 코드의 경우는, valid, invalid 2개의 변수를 두어 제어를 했다.
평소에는 valid: true, invalid: false이기 때문에 CSS가 그대로 유지가 되며,
비밀번호가 다르다면 valid: false, invalid: true로 변경되어 CSS도 변경된다.

Style example

Class binding과 동일하게 style 또한 binding이 가능하다.
Style의 경우는 참, 거짓에 따라 적용하는 것이 아닌 실제 값을 변경함으로써 적용한다.
아래와 같이 함수를 통해 직접 style 값을 기입해 변경한다.

아래와 같이 버튼을 누름에 따라 잘 변함을 확인할 수 있다.

Event handling

v-on 디렉티브를 통해서 Event handling 또한 구현할 수 있다.
v-on 디렉티브는 v-bind와 같이 @로 생략이 가능하다.

• @Click Example

아래와 같이 button과 같은 태그의 속성으로 기능을 사용할 수 있다.
이름 그대로 버튼이 클릭되었을 때 해당 함수가 동작하도록 한다.

데이터를 선언하는 것과 같이 함수를 직접 정의해서 사용할 수 있다.
해당 방식을 통해서 버튼을 눌렀을 때, 요청을 보내도록 할 수 있을 것 같다.

결과가 잘 나오고, 함수 또한 잘 작동함을 확인할 수 있다.

• @Change Example

아래와 같이 change 속성을 걸어서 함수를 실행시킬 수 있다.
change는 해당 태그의 값이나 상태가 변할 때, 함수가 실행된다.

선언된 데이터는 아래와 같고 그 아래의 사진은 동작 로직이다.
데이터와 로직을 보면 쉽게 동작을 이해할 수 있을 것이다.
위의 select에서 선택한 type에 따라 아래 select의 내용이 바뀐다.

아래와 같이 선택한 type에 따라 변함을 확인할 수 있다.

Router의 사용

가장 먼저, router 폴더의 index.js를 구성해야 한다.

• createRouter, createHistory를 import 해야 한다.
• 경로를 설정하고 싶은 각종 페이지들을 import 해야 한다.
  • views 폴더에 모아놓은 vue 파일들을 import한다.

필요한 component들과 library를 import 했다면, 이제 경로를 설정한다.
아래와 같이 const routes 배열을 선언해, 경로들을 직접 구성할 수 있다.
경로는 lambda 방식으로도 선언할 수 있고, 그냥 선언식으로도 가능하다.

이후 필수적으로 const router를 통해 라우터를 생성해야 한다.
생성된 라우터는 export 시켜 main.js에서 추후 사용할 것이다.

• History?
  • History는 URL의 형태를 결정한다.
  • 기본적으로 createWebHistory를 사용하면 HTML5 모드를 사용하게 된다.
    • https://example.com/user/id와 같은 형태로 작성된다.
      

마지막으로 main.js에서 router를 실행시켜야 라우터 구성이 마무리 된다.
main.js는 최상위 컴포넌트의 App 인스턴스를 주입하고 실행시키는 역할을 한다.
mount가 되면 App 인스턴스가 실행이 되는데, 그 이전에 라우터를 실행시킨다.