[Vue3] Vue(3)

❗❗  데브코스 43일차 (09.29)

Vue3일차...React가 그리워지기 시작했다...

Vue의 강력한 장점 양방향 바인딩과 Vue 프로젝트를 사용하기에 앞서,

환경세팅을 위한 node, npm에 대해서 강의가 진행 됐다.

 

✅ 양방향 바인딩

"v-model" 디렉티브를 사용하면 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있다.코드 예시를 통해 알아보자.

 

1. Input 예시

//Vue 코드
<div>
  <input v-model="message" placeholder="edit me" />
  <p>Message is: {{ message }}</p>
</div>

data() {
  return {
  	message: ''
  }
}

위의 코드를 실행하면 input값에 적힌 내용에 따라 "message" 변수가 실시간으로 바뀐다.

 

Vue를 처음 학습하면 이 문법이 좋은지 이해가 안 될 것이다. 리액트로 구현한 input, value를 통해 차이를 찾아보자.

//React 코드
function Input() {
    const [message, setMessage] = useState('');
 
    const onChange = (e) => {
    	//이벤트가 발생하는 target의 value값을 가져와 업데이트해준다.
        setText(e.target.value);
    }
    return (
        <div>
            <input onChange={onChange} value={message} />
            <div>
                {message}
            </div>
        </div>
    )
}

Vue의 코드는 변수만 정의해주면 알아서 값이 바뀌면서 출력값도 바뀐다. 즉 Input값에 따라 "message"가 서로 양방향으로 바인딩이 되고 있다.

하지만 React의 경우 onChange함수를 통해 값이 변경될 때 마다, 값을 직접받아와서 업데이트를 진행해줘야하는 다소 번거로움이 있다.

 

2. checkbox예시

<div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

data() {
  return {
  	checkedNames: []
  }
}

위의 코드를 실행하면 체크 결과에 따라 배열이 자동으로 업데이트 되면서 화면에 출력된다.

이 뿐만 아니라 radio, select 등 도 양방향 바인딩을 이용할 수 있다.

 

✅ 새로 알게된 지식

nvm : node 버전 관리하는 도구이다. 프로젝트별로 node.js 버전을 다르게 설정하여 사용 및 관리할 수 있다.

 

npx : npm은 로컬 환경에서 설치해서 사용하는데 npx는 메모리상에서만 설치하고 실행하는 명령어이다.

 

.gitignore : 깃버전관리 시스템을 통해서 무시할 폴더나 파일을 명시해서 git에 올리는걸 방지할 수 있다.

보통 아래 항목들을 추가한다. 배포파일 및 개인 설정파일

dist/

node_modules/

.vscode/ (vscode 사용자)

.idea/ (웹스톰 사용자)

.DS_Store/ (맥 사용자)

 

👨‍💻 Vue의 양방향 바인딩은 정말로 탐나는 문법이다. React로 훔쳐오고싶다....

 

📖 학습한 내용

• Vue(3)
  
  • 폼 입력 바인딩
  • 컴포넌트 기초
  • Node.js와 NPM