react useRef

//useRef(디자인)


// dom을 변경할 때 사용

function App() {

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

  const myRefs = Array.from({length:list.length}).map(()=>createRef()); //createRef는 동적으로 referece들을 생성해주는 함수 , myRef가 배열로 만들어진다.

  return(
   <div>
     <button onClick={()=> {
        console.log(myRef);
        myRef.current.style.backgroundColor='red'; //꺽정을 변경하려면 myRef[1]로 수정하면 된다.
      }}
      >
      색변경
      </button>

      <div ref={myRef}>박스</div>

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

'프론트엔드 > 리액트-데어프로그래밍 강좌정리' 카테고리의 다른 글

react props  (0) 2021.07.22
react componets styled  (0) 2021.07.22
react useMemo  (0) 2021.07.22
react useEffect  (0) 2021.07.22
react useState  (0) 2021.07.21

댓글()
구독