- src/index.js에 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다.
(...)
ReactDOM.render(<App/>, document.getElementById('root'));
* 리액트에서도 id사용가능, JSX 안에서 돔에 id를 달면 해당 돔을 렌더링할 때 그대로 전달된다.
* 하지만 특수한 경우말고는 권장하지 않음
* 예) 같은 컴포넌트를 여러번 사용할 때
* HTML에서 DOM의 id는 유일해야하는데 중복 id를 가진 DOM이 여러개 생기게 된다.
* ref : 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.13. ref는 언제사용?
-
일단, 특정 DOM에 작업을 해야할 때 사용한다는 것.
-
그렇다면, 어떤 작업을 할 떄 ????
-
DOM을 꼭 직접적으로 건드려야 할 때 -
바닐라js 및 jQuery로 만든 웹사이트에서 input을 검증할 때는 특정 id를 가진 input에 클래스를 설정한다.
-
함수 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야한다.
-
DOM을 꼭 사용해야할때 : DOM에 직접적으로 접근해야해서 바로 red사용한다.
(1) 특정 input에 focus 주기
(2) 스크롤박스 조작하기
(3) Canvas 요소 -
ref를 만드는 가장 기본적인 방법 : 콜백함수를 사용하는 것 (ref를 달고자하는 요소에 ref라는 콜백함수를 props로 전달)
<input
ref={(ref) => {this.input=ref}}
/>
* 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려한 후에 활용
* 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모-자식 흐름으로 교류
* Redux, Context API 로 효율적으로 교류한다