CodeHoon

안녕하세요 상훈입니다.

Vue.js 3 - composition API 에서 특정 컴포넌트에 v-model 값을 내려주는 방법을 포스팅하도록 하겠습니다.

필요요소 : 부모컴포넌트, 자식컴포넌트

소스 확인(링크를 통해 작성한 내용 확인이 가능합니다)

1. 부모컴포넌트

<script setup>
    import CustomInput from './CustomInput.vue'
    import {ref} from 'vue'

    const message = ref('')
</script>

<template>
  메시지: {{ message }} <br/>
  <CustomInput v-model:message="message"/>
</template>

ref 로 message 를 선언 후
v-model 과 연동하여 자식 컴포넌트에 값을 내려준다.

2. 자식컴포넌트

<script setup>
  const props = defineProps({
    message: String,
  })
  const emits = defineEmits(['update:message'])
  
  const updateInputs = (e, type) => {
    emits(`update:${type}`, e.target.value)
  }
</script>

<template>
  <input
    :value="message"
    @input="updateInputs($event,'message')"
  /> 
</template>

props: defineProps 로 message 값을 받아온다고 선언
emit:  props로 받아온 message 를 키 값으로 update:message 로 상신할 것을 선언

method: updateInputs 에서 받아온 event 를 기준으로 value 를 emit 시켜주는 것을 확인 할 수 있다.

업무 중에 이전 소스에서 emit('update:input') 이라고 선언되어있길래 처음 보고, 이해가 안되어 공식문서를 찬찬히 살펴보게 되었다.

v-model 관련하여 문서를 찾아보게 되었고, component v-model 이라는 곳에서 확인할 수 있었다.

내용은 제대로 익히기 위해 playground에서 작성하였다.

안녕하세요 상훈입니다. 

제이쿼리를 이용하여 (1) radio 버튼이 체크되어있는지 여부, (2) 체크 되어있는 값을 가져오기의 예제를 작성해보도록하겠습니다.

html

<input type="radio" name="item" value="1">
<input type="radio" name="item" value="2">
<input type="radio" name="item" value="3">
<input type="radio" name="item" value="4">

이렇게 4개의 이름이 같은 radio 버튼이 존재하고, 모두 값이 다를 때,

1. 버튼이 체크 되어있는지 여부 확인하기

const itemChecked = $('input[name=item]').is('checked');

item 이라는 name 속성을 가진 radio 태그 중 체크 되어있는 것의 노드를 가져옵니다.

 2. 체크 되어있는 값을 가져오기

위를 좀 더 단축하여 사용하겠습니다.

const itemValue = $('input[name=item]:checked').val();

이렇게 item이라는 name 속성을 가진 녀석 중 체크 되어있는 노드의 값을 가져옵니다.

이상입니다.

html <input> 태그 내에서 enter 를 입력 시 javascript로 원하는 이벤트를 발생시키는 방법

input 태그 내에

<input type="text" 
	onkeypress="if(window.event.keyCode==13){ function name() }"
    />

를 작성해주도록 한다.

enter = keyCode 13

안녕하세요 상훈입니다.

React.js 로 input 태그 내에 값을 입력하면 내용을 곧바로 h1 태그 내에 작성되게 하는 기능을 구현하겠습니다.

 <div id="root"></div>

    <script type="text/babel">
    class App extends React.Component {
        constructor (props){
            super(props)
            this.state = {
                text: '',
            }
            this.handleChange = this.handleChange.bind(this)
        }

        render () {
            return (
                <div>
                    <input type="text" 
                        value={this.state.text}
                        onChange={this.handleChange} />    
                    <h1>{this.state.text}</h1>
                </div>
            )
        }

        handleChange (event) {
            this.setState({
                text: event.target.value
            })
        }
    }

    const container = document.querySelector("#root")
    ReactDOM.render(<App />, container)

    </script>

지난번과 마찬가지로, 

root라는 id를 가진 div 태그를 생성하였습니다.

text = '' 로 놓고,  값이 변할때마다 handleChange() 함수를 호출하고, 그 값을 h1태그에 보여주는 형식입니다.