useRef

javascript에서 특정돔을 선택할때에는 getElementById, querySelector같은 Dom Selector함수를 사용해서 돔을 선택한다.

리액트에서도 돔을 직접 선택해야하는 상황이 발생한다. 그럴때 ref라는것을 사용한다.

함수형 ref에서는 useRef라는 hook함수를 사용한다. 클래스형 컴포넌트에서는 콜백함수를 사용하거나 React.createRef라는 함수를 사용한다.

함수형 사용

import React, {useRef, useState} from 'react';

function App() {
	const nameInput = useRef();
    return (
        <div className="App">
            <input
                name="user"
                placeholder="이름"
                onChange={onWatch}
                value={user}
                ref={nameInput}
            />
         </div>
    )
}

사용법은 useRef 훅을 불러와 Ref객체를 만든다음(변수에 저장한다음) 돔에 ref값으로 설정한후 .current 값에 접근하면 원하는 돔을 가르키게 된다.

클래스형 사용

import React from "react";
import logo from "./logo.svg";
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import styled from "styled-components";

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class Testing extends React.Component {
    constructor(props) {
        super(props);
        this.text = React.createRef();
    }

    componentDidMount(){
        // 콘솔에서 확인해보자!
        console.log(this.text);
        console.log(this.text.current);
        this.text.current.focus();
    }

    // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
    render() {

        return (
            <div className="App">
                <div>
                    <input type="text" ref={this.text}/>
                </div>
            </div>
        );
    }
}

export default Testing;