선택n집중

useRef 의 객체로의 사용을 살펴보자.1. import ! useRef !import { useRef } from 'react'; 2.컴포넌트 내의 useRef객체 생성. const inputEle = useRef({ name: null, phoneNum: null, });객체 내부를 미리 정의 해야할 필요는 없지만.우리의 명시성을 위해 null로 지정해주자. name에는 이름입력에 해당하는 input을phoneNum에는 전화번호 입력에 해당하는 input을 지칭할것이다.그이후 각각의 클릭이벤트를 통해 각 해당하는 input 의 속성을 바꿔보려한다. -컴포넌트 내부 return- return ( ..

익명의 배열을 활용한 useRef ref 속성에 함수나 , 함수 객체를 참조하여 전달할 때 지정한 매개변수는우리가 이벤트 핸들러에서 이벤트 객체를 얻고 target 속성을 이용해 해당 요소의 참조를 얻는 것과동일한 효과가 발생된다.target의 속성을 이용할 필요 없이 지정한 매개변수가 그의 효과를 발생시키기 때문에,매개변수 자체가 해당 요소를 직접 참조하게 된다.예제를 보며 설명해보겠다. const inputEle = useRef(new Array(2));익명의 2개의 공간이 있는 useRef 저장 공간을 inputEle가 참조받아 저장공간의 이름이 생겼다. 첫 마운트 시점에는 이 값이 정해지지 않은 상태로 return 의 엘리먼트 들이 랜더링 된다. return ( ..

useRef ? useRef 는 무엇일까 ? useRef는 변수의 단점을 보완한 변수같은 아이라고 볼 수 있다고 나는 생각한다.즉 , 일반 변수는 리랜더링이 이루어질때마다 함수가 재실행이되며 , 초기화가 되는 점을 보완하여 나왔고.리랜더링이 되더라도 값을 유지할수 있는 독립적인 저장공간 같은 역할을 한다. 특징1. 직접적으로 HTML 의 돔요소를 직접 제어한다.우리는 리액트를 통하여 가상DOM을 건들이고 ,가상돔과 직접적인 HTML의 DOM 을 비교하여 랜더링을 하는 작업을 했었다.하지만 Ref는 가상돔의 상태값은 변하지 않았지만 직접적인 HTML의 DOM요소를 터치할 수 있다.즉, 가상돔의 상태값은 변하지 않았기 때문에 ref의 값이 변한다고 해도 랜더링 되지 않는다. 2. focus의 속성을 통해 우..