반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Vue
- Vue transition
- App.vue
- JavaScript
- storybook
- express
- HOC
- scss
- ES6
- vuex
- CSS
- input
- Vue.js
- MySQL
- 쉬운설명
- v-html
- 자료구조
- react
- jsx
- sass
- nodejs
- 자바스크립트
- mapGetters
- TypeScript
- Wecode
- 댓글달기
- State
- webpack
- 리액트
- event
Archives
- Today
- Total
익명의 개발노트
리액트 Ref 본문
반응형
컴포넌트 내부에서 DOM에 직접 접근할 경우가 생기면 ref를 사용한다.
먼저 ref를 사용하지 않고 원하는 기능을 구현가능한지 살펴보는게 먼저이다.
1. DOM을 꼭 사용해야 하는경우
1) 특정 input 박스에 포커스 주기
2) 스크롤 박스 조작하기
3) canvas 요소에 그림그리기 등
2. 사용방법
1) props 설정하듯이 하면 된다.
2) 아래처럼 원하는 DOM에다가 ref를 주면된다.
(...)
return (
<div
style={style}
ref={(ref) => {this.box = ref}} //부모꺼에만 ref다니깐 자식 컴포넌트까지 볼수있음.
>
<div style={innerStyle} //ref를 자식에게 두면 부모꺼는 못봄.
/>
</div>
);
반응형
'프로그래밍 > ReactJS' 카테고리의 다른 글
리액트 CSS관련 라이브러리 (0) | 2019.04.24 |
---|---|
리액트 라이프싸이클 (0) | 2019.04.24 |
리액트 이벤트 (0) | 2019.04.23 |
State (0) | 2019.04.23 |
리액트 JSX 문법 및 props, PropType (0) | 2019.04.23 |