React Ref사용하기

시작하기

React에서 엘리먼트로 접근해서 사용하기 위해서는 Ref를 사용하는 것을 권장하고 있습니다.
input focus, element 사이즈 측정 등에서 이용합니다.

사용법

Ref를 사용하는 여러가지 방법이 있습니다. 다양한 방법을 알아보겠습니다.

class에서 사용하기

class에서 Ref를 사용하는 방법은

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
import React from "react";

type Props = {};
type State = {};

class App extends React.Component<Props, State> {
private divRef: HTMLDivElement | null = null;

constructor(props: Props) {
super(props);
this.state = {};
this.divRef = null;
}

componentDidMount() {
console.log(this.divRef);
}

render() {
return (
<div
ref={(ref) => {
this.divRef = ref;
}}
>
app
</div>
);
}
}
export default App;

다음과 같은 방법으로 사용하여 콘솔을 찍어보면 <div>app</div> 값이 도출됩니다.

다른방법으로 createRef를 사용해 보면 또 다른 값이 나옵니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { createRef } from "react";

type Props = {};
type State = {};

class App extends React.Component<Props, State> {
private div: React.RefObject<HTMLDivElement>;

constructor(props: Props) {
super(props);
this.state = {};
this.div = React.createRef();
}

componentDidMount() {
console.log(this.div);
}

render() {
return <div ref={this.div}>app</div>;
}
}
export default App;

결과는 {current: <div>app</div>}으로 나오게됩니다.
ref를 사용할때 this.div.current 방식으로 사용해야 되는 것이죠.

hooks에서 사용하기

hooks에서는 createRef와 사용법이 같습니다.

1
2
3
4
5
6
7
8
9
10
11
import React, { useRef, useEffect } from "react";

const App: React.FC = () => {
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
console.log(ref);
}, [ref]);

return <div ref={ref}>app</div>;
};

결과는 {current: <div>app</div>}으로 class에서 createRef 값과 같은 값이 나오게됩니다.

Props로 Ref넘겨주기

리스트를 map메소드를 이용해서 뿌려줄때 뿌려주는대상이

라면 직접 ref를 넣으면 되지만 컴포넌트라면?
그럴경우 사용하는 것이 react의 forwardRef입니다. 쉽게 생각해서 ref를 props처럼 넘겨준다고 생각하면 됩니다.

조금전에 만들었던 예시와 작은 컴포넌트 하나를 생성하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useRef, useEffect } from "react";

const App: React.FC = () => {
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
console.log(ref);
}, [ref]);

return <RefComponent ref={ref}>app</RefComponent>;
};

const RefComponent: React.FC = ({ ref }: Ref<HTMLDivElement>) => {
return <div ref={ref}>ref</div>;
};

일반적으로 이렇게 작성을 생각하게 되는데 이럴경우 ref가 제대로 전달이 되지 않습니다.
그럼 forwardRef을 사용해보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { useRef, useEffect, forwardRef } from "react";

const App: React.FC = () => {
const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
console.log(ref);
}, [ref]);

return <RefComponent ref={ref}>app</RefComponent>;
};

type Props = {
ref: Ref<HTMLDivElement>;
};
const RefComponent: React.FC = forwardRef((props, ref) => {
return <div ref={ref}>ref</div>;
});

상위 컴포넌트는 변하는것이 없습니다.
하위 컴포넌트에 forwardRef()를 한번감싸줍니다.
forwardRef의 첫번째 매개변수는 props이고 두번째 변수가 ref입니다. 두번째의 ref를 엘리먼트에 넣어주고 확인을 해보겠습니다.
결과값으로 {current: <div>app</div>}이 나오는 것을 확인할 수 있습니다.

Share