react3 typescript를 사용할 때 react에서 useRef를 사용하는 법. 문제 velopert의 튜토리얼을 진행하던 중 문제에 봉착했다. 이 튜토리얼에서는 useRef를 사용하여 input DOM을 선택하여 어떤 버튼을 눌렀을 때에 input에 focus가 되도록 하는 법을 가르쳐 준다. 이 코드의 일부를 가져와보겠다. const nameInput = useRef(); const onChange = (event) => { const { name, value } = event.target; //... }; // ... // ... typescript를 사용할 때에는 처음 nameInput을 선언시 type을 지정해줘야한다. input의 ref로 들어가는 변수의 type, onChange 에 들어갈 인자의 type을 알기 힘들다는 문제에 부딧혔다. 해결 userRef()를 넣어서.. 2021. 10. 1. 배열 렌더링 (key값이 필수인 이유) 배열 렌더링 리액트에서 배열을 렌더링할 때에 굳이 하나하나 렌더링하지 않고 map을 통하여 한번에 렌더링할 수 있다. 하지만 비교를 위해 먼저 하나하나 렌더링 해보자. import React from 'react' function User({user}) { return ( {user.name} ) } function Test() { const arr = [ { id: 1, name: 'mijeong', }, { id: 2, name: 'hyeonkim', }, { id: 3, name: 'kilee', } ] return ( ) } export default Test 하나하나 렌더링하는 것에 대한 불편함을 느껴 보았으니 map을 사용하여 렌더링해보자. map은 배열의 요소를 바꾸고 새롭게 복사한 배열을 .. 2021. 7. 25. 개발자 Velopert의 교습서 보고 따라하기 지인의 추천으로 velopert라는 사람을 알게 되었고 이 분의 교육 리액트 튜토리얼을 보고 따라하기로 하였다. https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 리액트를 공부하려는 사람은 함께 공부해보도록 하자. 사실 시작한지는 꽤 되었지만 이제야 블로그에 시작한다고 올린다. ㅎㅎ 2021. 7. 25. 이전 1 다음