[React 문법 기초] hooks / useRef

useRef

Dom의 디자인을 변경할 때 사용한다.

​

useRef 사용하여 배경색 변경하기

function App() {
  
  // useRef 변수생성
  const myRef = useRef(null);

  return (
    <div>
      <button onClick={()=> {
        console.log(myRef);
        console.log(myRef.current);  // <div>박스</div>

        //useRef 내부 변경
        myRef.current.style.backgroundColor='red';

      }}>색변경</button>

      // ref속성에 useRef 변수 지정
      <div ref={myRef}>박스</div>
    </div>

​

useRef 이용하여 List형태의 dom 변경

function App() {

  const myRef = useRef(null);

  const [list, setList] = useState([{id:1,name:"길동"}, {id:2,name:"꺽정"}])

  // list 길이 만큼 myRef를 생성하여 리스트에 저장
  const myRefs = Array.from({length:list.length}).map(() => createRef());

  return (
    <div>
      <button onClick={()=> {
        console.log(myRef);
        console.log(myRef.current);  // <div>박스</div>
        console.log(list);
        myRef.current.style.backgroundColor='red';
        myRefs[0].current.style.backgroundColor='green';
        myRefs[1].current.style.backgroundColor='yellow';
      }}>색변경</button>
      <div ref={myRef}>박스</div>

      {list.map((user, index)=>(
        <h1 ref={myRefs[index]}>{user.id}. {user.name}</h1>
      ))}
    </div>
  );
}

​

[결과]