끙끙끙...
5장. ref: DOM에 이름 달기
DOM에 이름을 달라...고 하면 id와 class를 떠올리기 마련!
현 React 파일에도 id가 root라는 div가 존재하며,
getElementById를 이용해 id가 root인 요소에 컴포넌트를 렌더링 하란 코드가 존재한다.
이렇게 HTML에서 id를 이용해 DOM에 이름을 다는 것처럼,
React 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다! → 이것이 바로 ref(reference)!
근디... 그냥 id를 사용하면 안 되는감?
React 컴포넌트 안에서도 id를 사용할 수는 있다!
하지만 같은 컴포넌트를 여러 번 사용할 경우...
중복 id가 생기게 되니(나도 실제 그랬고) 잘못된 사용을 한 셈!
ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러만 문제에서 벗어날 수 있다!
따라서 특수한 경우가 아니면 id 사용은 권장하지 않는다고 한다.
5-1) ref를 사용하는 상황
그럼 ref는 정확히 어떤 상황에서 사용하는 걸까?
바로바로 DOM을 직접적으로 건드려야 할 때!
즉 지난번처럼 DOM에 접근하지 않아도 state로 구현할 수 있을 때는 ref를 사용하지 않는다.
지금은 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아볼 것!
함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 이후에 Hooks와 함께 다룰 예정이다.
1. ValidationSample 컴포넌트 만들기
비밀번호를 검증해주는 컴포넌트를 만들어보자 → 0000을 입력하면 통과되도록
src/ValidationSample.js
(처음으로) 클래스형으로 작성한 컴포넌트!
전체적인 흐름만 살펴보자면...
state에 비밀번호, 입력, 유효성 이렇게 세 가지 속성을 지정!
onChange 이벤트가 발생하면 입력받은 value를 state의 password로 set!
onClick 이벤트가 발생하면(검증하기 누른 것) clicked가 true로,
this.state.password가 0000이면 validated로 true로 변경!
className에서 연산자를 통해 clicked가 true이고, validated가 true이면 className을 success로 설정!
src/ValidationSample.css
className이 success일 경우와 failure일 경우 배경색을 달리 해준다!
2. 렌더링 하기
App.js
App에서 ValidationSample 컴포넌트를 렌더링!
이후 ref를 사용하기 때문에 미리 클래스형 컴포넌트로 변경해줬다.
0000을 입력하고 검증하기를 눌렀을 경우, 배경색이 변경되는 걸 볼 수 있다. 정상 작동 확인!
JS에서라면 input에 id를 지정한 후, getElementById를 통해 이를 가져온 후 유효성 검사를 했을 테다!
하지만 React에서는 state를 통해 이것이 가능하단 말씀.
그렇다면 ref를 사용하는 순간은...? state만으로 해결이 불가능한 기능이 구현할 때!
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
이 때는 어쩔 수 없이 DOM에 직접적으로 접근해야 하며, ref를 사용한다!
5-2) ref 사용
ref는 두 가지 방법으로 사용할 수 있다.
1. 콜백 함수를 통한 ref 설정
가장 기본적인 방법!
ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다.
이 콜백 함수는 ref 값을 파라미터로 전달받고, 전달받은 ref를 컴포넌트의 멤버 변수로 설정!
이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리키게 된다!(즉 ref가 this.input인 것)
ref 이름은 DOM 타입과 상관없이 자유롭게 지정할 수 있다.
2. createRef를 통한 ref 설정
React의 내장 함수인 createRef를 사용하는 방법도 존재한다.
우선 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아준다.
그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주면 설정 완료!
3. 적용
만들어둔 ValidationSample 컴포넌트에서 button을 누른 후 input에 focus가 가도록 만들어보자.
ValidationSample.js
input에 ref를 지정!
이를 통해 this.input은 컴포넌트 내부 input 요소를 가리킨다.
onClick 이벤트가 발생하면 → this.input에 focus가 가도록 설정!
검증하기를 눌러도 input에 커서가 계속 남아있다. 성공!
5-3) 컴포넌트 ref 달기
React에서는 컴포넌트에도 ref를 사용할 수 있다.
이는 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓰는 방법!
어떻게 다는디? → DOM에 다는 방법과 똑같다!
이렇게 하면 컴포넌트 내부의 메서드 및 멤버 변수에도 접근할 수 있다.
즉 myComponent.inputmyComponent.input처럼 내부의 ref 에도 접근이 가능!
정리하자면, ref는 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 사용한다.
이 말인즉 가장 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 고려한 후 활용해야 한다는 뜻!
또한 단순히 ref를 서로 다른 컴포넌트끼리 데이터를 주고받을 때 사용한다고 생각해서는 안된다!
컴포넌트끼리 데이터를 교류할 때는 언제나 부모 ↔ 자식 흐름을 유지해야 한다.
ref를 전달하고, 이를 받아서 전달받은 컴포넌트의 메서드를 실행하고, 어쩌고 저쩌고... 는 React의 사상과 어긋난 것!
마지막으로 함수형 컴포넌트에서는 useRef라는 Hook 함수를 사용하며,
이는 React.createRef 와 유사한 개념으로 생각해두면 된다 → 이후에 다뤄볼 예정!
'source-code > React' 카테고리의 다른 글
| 리액트를 다루는 기술 _ 8장 (0) | 2021.03.10 |
|---|---|
| 리액트를 다루는 기술 _ 6장 (0) | 2021.03.09 |
| 리액트를 다루는 기술 _ 4장 (0) | 2021.03.09 |
| 리액트를 다루는 기술 _ 1장, 2장, 3장 (1) | 2021.03.09 |
| React Component, props, state 맛보기 (2) | 2021.01.20 |
