v-for 객체나 배열을 순회하여 html 요소를 만들어낸다. React에서의 map()과 비슷하다. key 속성은 React와 달리 필수는 아니지만 같은 이유로 사용하는 것이 권장된다. // 객체 배열로 v-for를 사용할 때 {{ item.name }} 객체 배열이 아닌 그냥 배열로도 사용가능하다. // 배열로 v-for을 사용할 때 {{ item }} 객체로 사용할 때 1번째 인자는 값, 2번째 인자로 키를 받아올 수 있다. // 객체로 v-for를 사용할 때 {{ key }}: {{ value }} ref React의 ref와는 다르게 DOM을 직접 조작하지 않는다. 요소 또는 컴포넌트 인스턴스에 대한 반응형 참조를 생성하는 방법으로 사용된다. 이를 통해 반응형 방식으로 기본 DOM 요소 또는 컴..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Ngmxx/btrNQqiGdZR/DO4lsCjErlAEWXoJOJAM2K/img.png)
부모 컴포넌트에서 자식 컴포넌트의 state를 조작해야하는 상황이 생겼는데 나의 경우에는 ref를 여러개의 자식 컴포넌트에 달아서 조작하려고 했다. 그런데 ref는 current로만 접근할 수 있어서 마지막 하나의 자식 컴포넌트의 함수만 실행할 수 있었다. 한번에 여러개를 조작하려고 하시는 분은 참고하시길..! 부모 컴포넌트에서 자식 컴포넌트 state 조작하기 useRef를 사용해서 부모 컴포넌트에서 자식 컴포넌트를 조작할 수 있다. 먼저 부모 컴포넌트에서 ref를 선언해서 자식 컴포넌트로 넘겨준다. import { useRef } from 'react'; import Child from './Child'; import styled from 'styled-components'; const Parents..
input값을 넘긴 후 input값을 초기화하려고 하는데 오류가 남! class addForm extends Component { inputRef = createRef(); addHabit = (e) => { e.preventDefault(); const name = this.inputRef.current.value; this.props.addHabit(name); this.inputRef.current.reset(); }; ...... this.inputRef.current.reset is not a function this.inputRef.current.reset는 함수가 아니다 왜..? reset()은 있는 건데... 왜...? input에는 reset()을 사용할 수 없다 input을 감싸고 있는..
보호되어 있는 글입니다.
- Total
- Today
- Yesterday
- Python
- 자바스크립트
- 드림코딩
- js
- 깃
- 타입스크립트
- vscode
- html
- 스파르타코딩클럽
- CSS
- 김버그
- Til
- 코딩앙마
- 코드잇
- 회고
- scss
- TS
- 파이썬
- vue
- map
- 제이쿼리
- 비주얼스튜디오코드
- git
- 구름에듀
- 리액트
- 제로초
- 저스트코드
- Typescript
- javascript
- React
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |