[Hook] useRef

useRef란?

리액트를 사용하다 보면 focus라던지, 스크롤 설정이라던지 DOM에 직접적으로 접근 해야하는 경우가 생긴다.

그럴 때 사용하는것이 useRef이다.

 

---

기본 사용법

1️⃣  useRef()를 사용하여 객체를 만든다.

import React, { useRef } from 'react';

const exampleRef = useRef();

 

2️⃣  접근하고자 하는 DOM에 ref 값으로 만들어준 객체 값을 넣어준다.

import React, { useRef } from 'react';

const exampleRef = useRef();

const example = () => {

    return (
        <input ref={exampleRef}/>
     );
} 
 export default example;

 

3️⃣  DOM활용하기 : ref객체의 .current값은 접근하고자 했던 DOM을 가르키게 된다.

import React, { useRef } from 'react';

const exampleRef = useRef();

const example = () => {

    const exampleFn = () => {
        exampleRef.current.focus();
    }
    return (
        <input ref={exampleRef}/>
     );
} 
 export default example;

 

---

내 코드

스크롤제어를 위해 useRef를 사용했다

import React, { useState, useRef } from 'react';
import { Typography, TextField, Button } from '@material-ui/core/';
import { useDispatch } from 'react-redux';
import useStyles from './styles';
import { commentPost } from '../../actions/posts';


const CommentSection = (post) => {
    const classes = useStyles();
    const [comments, setComments] = useState(post?.post?.comments);
    const [comment, setComment] = useState('');
    const user = JSON.parse(localStorage.getItem('profile'))

    const dispatch = useDispatch();
    const commentsRef = useRef(); //1️⃣ ref객체 생성

    const handleClick = async ()=> {
        const finalComment = `${user.result.name} : ${comment}`; 

        const newComments = await dispatch(commentPost(finalComment,post.post._id));

        setComments(newComments);
        setComment('');

        commentsRef.current.scrollIntoView({behavior : 'smooth'}) //3️⃣ 선택된 DOM활용
    };

    return (
        <div>
            <div className={classes.commentsOuterContainer}>
                <div className={classes.commentIneerContainer}>
                    <Typography gutterBottom variant="h6">Comments</Typography>
                    {comments?.map((c,i) => (
                        <Typography key={i} gutterBottom variant="subtitle1">
                           <strong>{c.split(':')[0]}</strong> 
                           {c.split(":")[1]}
                        </Typography>
                    ))}
                    <div ref={commentsRef}/> //2️⃣ ref객체 값 부여
                </div>
                {user?.result?.name && (
                    <div style={{width:'70%'}}>
                    <Typography gutterBottom variant="h6">Write a Comment</Typography>
                    <TextField
                        fullWidth
                        rows={4}
                        variant="outlined"
                        label="comment"
                        multiline
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                    />
                    <Button style={{marginTop : '10px'}} fullWidth disabled={!comment} variant="contained" color="primary" onClick={handleClick}>
                            Comment
                    </Button>
                    </div>
                )}
            </div>
        </div>
    );
};

export default CommentSection;