리액트에서 돔요소를 가져오려면 Ref

태권·2022년 8월 12일
0

개념알기

목록 보기
6/26

React.createRef()

 this.text = React.createRef();
 //render 밖에서 변수선언하는곳에서 씀
<div>
<input type="text" ref={this.text}/>
</div>

React.useRef()

const BucketList = ({ list }) => {
  const my_lists = list;
  const my_wrap = React.useRef(null);

  console.log(my_wrap); // 콘솔로 확인해봐요!

  window.setTimeout(() => { // 1초 뒤에는?!
    console.log(my_wrap);
  }, 1000);
  return (
    <div ref={my_wrap}>
      {my_lists.map((list, index) => {
        return <ItemStyle key={index}>{list}</ItemStyle>;
      })}
    </div>
  );
};

타임아웃을 주는건 없이하면 순서대로 읽혀서 초기값은 null이 읽히고 타임아웃 후에는 가상돔에서 돔으로 올라가서 div가 읽힌다.

profile
2022.08 개발자 시작

0개의 댓글