useRef

[React] useRef

useRef 란?

 

특정 DOM을 가리킬 때 사용하는 Hook 함수.
Ex. 포커스 설정, 특정 엘리먼트의 크기/색상 변경 등..

 

 리액트를 사용할때 간혹 DOM을 직접 선택해서 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야하던지 다양한 상황이 있습니다. 이럴 땐 리액트에서 ref라는 것을 사용합니다. 함수형 컨포넌트에서 ref를 사용할 때에는 useRef라는 Hooks함수를 사용합니다. 

 

useRef 사용하기

3초 뒤에 input창에 포커싱이 되도록 설정해보자.

import React, { useRef } from "react";

const App = () => {
  // 1. Ref객체 만들기
  const here = useRef();
  2. focus( ) DOM API 호출
  setTimeout(() => here.current.focus(), 3000);
  return (
    <div>
      <h1>Hello</h1>
      // 2. 원하는 곳에 ref 값으로 설정하기
      <input ref={here} placeholder="how are you" />
    </div>
  );
};

export default App;

1) useRef( )를 사용해 Ref객체 만들기
2) 해당 객체를 활용한 작업 설정 .current.focus()
3) 만든 Ref객체를 선택하고 싶은 DOM에 ref 값으로 설정하기
-> Ref객체의 .current값은 선택한 DOM을 가리키게 된다!
+) useRef에 파라미터를 넣어주면, 이 값이 .current의 기본 값이 된다!

 

 

 

 

1)

import React , {useRef} from 'react'
import {IoIosChatboxes} from 'react-icons/io'
import {DropdownButton,Dropdown} from 'react-bootstrap'
import Image from 'react-bootstrap/Image'
import {useSelector} from "react-redux"
import firebase from "../../../firebase"

function UserPanel() {

    const user = useSelector(state => state.user.currentUser)
    const inputOpenImageRef = useRef() //드랍다운에 파일업로드 입히는법 



    const handleLogout = ()=>{ //firebase 로그아웃
        firebase.auth().signOut()
    }
    const handleOpenImageRef = ()=>{
        inputOpenImageRef.current.click(); //type 파일인 input도 같이 클릭되게함
    }



    return (
        <div>
            <h3 style={{ color: 'white' }}><IoIosChatboxes />{" "}Chat App</h3>
            <div style={{ display: 'flex', marginBottom: '1rem' ,marginTop: '1rem',marginLeft: '1rem'}}>
                <Image src={user && user.photoURL} roundedCircle style={{width:'30p',height:'30px',marginTop:'3px'}}/>
                <DropdownButton variant="outline-secondary" title={user && user.displayName} style={{backgroundColor:'#a3a7f0'}} >
                    <Dropdown.Item onClick={handleOpenImageRef}>사진변경</Dropdown.Item>
                    <Dropdown.Item onClick={handleLogout}>로그아웃</Dropdown.Item>
                </DropdownButton>
            </div>
            <input accept ="image/jpeg, image/png"  style={{display:'none'}} type="file" ref={inputOpenImageRef} />
        </div>
    )
}

 

 

 

 

 

2)

 

	messageEndRef = React.createRef() //메시지 입력시 채팅방 맨아래로 자동 scroll하기위해




    //타이핑을 할떄마다 자동스크롤 적용
    componentDidUpdate(){ 
        if(this.messageEndRef){
            this.messageEndRef.scrollIntoView({behavior:"smooth"}) //{behavior:"smooth"} 옵션
        }
    }
    
    
            return (
            <div style={{ padding: '2rem 2rem 0 2rem' }}>
                <MessageHeader handleSearchChange={this.handleSearchChange} />
                {/*메시지 나타내기(검색기능추가)*/}
                <div>
                    {searchTerm ?
                        this.renderMessages2(searchResults) //검색한게있으면 검색한 채팅창 보여주기
                        :
                        this.renderMessages2(messages)  //없으면 전체 채팅창 보여주기
                    }

                    {this.renderTypingUsers(typingUsers)}
                    <div ref={node => (this.messageEndRef = node)}/>{/*채팅 입력시 스크롤스 아래로 자동 내려가기*/}
                </div>
                <MessageForm />
            </div>
        )