react useRef
프론트엔드/리액트-데어프로그래밍 강좌정리2021. 7. 22. 09:32
//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 |
댓글()