리액트 기초 공부해보기 #7 useRef

이번시간엔 useRef를 배워보자.
useRef는 dom을 변경할 때 사용

예를들어 박스라는 div를 만들고 useRef를 하나 만들어서 div의 ref키 값에 {myRef}이렇게 넣는데. 그럼 연결이 된다.

이렇게 클릭을 하면 빨간색으로 변경이 되도록 코드를 입력해보았다.

여기서 색 변경을 클릭하면

색이 변경되는 것을 볼 수 있다. myRef는 current라는 키값을 들고 있어서 myRef.current라고 입력하면

우리가 지정한 style을 볼 수 있다.
다음은 내가 dom적으로 list를 변경하고 싶을때가 있다.

function App() {
  const myRef = useRef(null);

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

  return (
    <div>
      <button
        onClick={() => {
          console.log(myRef);
          console.log(myRef.current);
          myRef.current.style.backgroundColor = 'red';
        }}
      >
        색변경
      </button>
      <div ref={myRef}>박스</div>
      {list.map((user) => (
        <h1>{user.name}</h1>
      ))}
    </div>
  );
}

이렇게 길동,꺽정이라는 list를 만들고 우선 화면에 뿌려보았다. 근데 이 리스트에도 useRef를 적용시키려면 아까처럼 하면 한개밖에 적용이 안되므로 이것 또한 배열로 만들어야한다.

이 Array를 이용하여 길이가 list인 배열을 만드는데 여기서 map을 통해 useRef를 리턴할 순 없다. 그렇기에 동적으로 이 레퍼런스를 생성해주는 createRef()를 활용해 myRefs를 배열로 만든다.

참고로 이 map은 두 번째 매개변수로 index를 넣으면 map이 순회하면서 번호를만들면서 응답을 해준다.

그럼 이렇게 myRefs에 index를 넣으면 ref를 동적으로 만들수 있다.

이렇게 주면 버튼 클릭시 꺽정이를 빨간색으로 바꿀 수 있게 된다.

이번 게시물은 여기까지

이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 것입니다.