2-1. 라이프 사이클
공부 후 업데이트
2-2. Ref
Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함.
- 주로 Ref를 사용할 때
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
- Ref 생성하기
Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됨.
보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고,
그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 함.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
} render() {
return <div ref={this.myRef} />;
}
}
- Ref 접근하기
render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때,
그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 됨.
const node = this.myRef.current;
ref의 값은 노드의 유형에 따라 다름.
- ref 어트리뷰트가 HTML 엘리먼트에 쓰였다면, 생성자에서 React.createRef()로 생성된 ref는 자신을 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로서 받음.
- ref 어트리뷰트가 커스텀 클래스 컴포넌트에 쓰였다면, ref 객체는 마운트된 컴포넌트의 인스턴스를 current 프로퍼티의 값으로서 받음.
- 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없음.
아래의 예시들은 위에서 언급한 차이점들을 보여줌.
- DOM 엘리먼트에 Ref 사용하기
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// textInput DOM 엘리먼트를 저장하기 위한 ref를 생성.
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// DOM API를 사용하여 명시적으로 text 타입의 input 엘리먼트를 포커스.
// 주의: DOM 노드를 얻기 위해 "current" 프로퍼티에 접근.
this.textInput.current.focus();
}
render() {
// React에게 우리가 text 타입의 input 엘리먼트를
// 우리가 생성자에서 생성한 `textInput` ref와 연결하고 싶다고 이야기.
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
컴포넌트가 마운트될 때 React는 current 프로퍼티에 DOM 엘리먼트를 대입하고,
컴포넌트의 마운트가 해제될 때 current 프로퍼티를 다시 null로 돌려 놓음.
ref를 수정하는 작업은 componentDidMount 또는 componentDidUpdate 생명주기 메서드가 호출되기 전에 이루어짐.
- 클래스 컴포넌트에 ref 사용하기
아래에 있는 CustomTextInput 컴포넌트의 인스턴스가
마운트 된 이후에 즉시 클릭되는 걸 흉내내기 위해 CustomTextInput 컴포넌트를 감싸는 걸 원한다면,
ref를 사용하여 CustomTextInput 컴포넌트의 인스턴스에 접근하고 직접 focusTextInput 메서드를 호출할 수 있음.
CustomTextInput가 클래스 컴포넌트일 때에만 작동.
클래스형 컴포넌트는 createRef()를 이용하여 ref 어트리뷰트를 사용할 수 있게끔 함.
class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.focusTextInput();
}
render() {
return (
<CustomTextInput ref={this.textInput} />
);
}
}
- 함수형 컴포넌트에 ref 사용하기
함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없음.
function MyFunctionComponent() {
return <input />;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// 이 코드는 동작하지 않음.
return (
<MyFunctionComponent ref={this.textInput} />
);
}
}
DOM 엘리먼트나 클래스 컴포넌트의 인스턴스에 접근하기 위해 ref 어트리뷰트를 함수 컴포넌트에서 사용하는 것은 됨.
함수형 컴포넌트는 useRef()라는 react hook을 이용하여 ref 어트리뷰트를 사용할 수 있게끔 함.
function CustomTextInput(props) {
// textInput은 ref 어트리뷰트를 통해 전달되기 위해서 이곳에서 정의되어야만 함.
const textInput = useRef(null);
function handleClick() {
textInput.current.focus();
}
return (
<div>
<input
type="text"
ref={textInput} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
난 지금까지 react에서 input의 value 값을 받아올 때 하나하나 useState를 이용하여 상태관리를 해왔는데
Ref를 공부하면서 굳이 그럴 필요 없이 value값을 받아올 수 있다는 것을 알게 되었다.
2주차 강의는 매우 유의미했던 것 같다.
'(심층)리액트' 카테고리의 다른 글
다시 시작하는 리액트 - 리액트 실무 기초 3 (0) | 2023.03.29 |
---|---|
다시 시작하는 리액트 - 리액트 실무 기초 2 과제 (0) | 2023.03.29 |
(심층)리액트트위터 클론코딩(with firebase) - 06 (0) | 2023.02.18 |
트위터 클론코딩(with firebase) - 05 (1) | 2023.02.14 |
트위터 클론코딩(with firebase) - 하나의 이메일로 여러 계정 생성이 안되는 문제 해결 (0) | 2023.02.09 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!