선택n집중

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. Route 와 a href 의 연결.새로고침 현상 ? O 하위 컴포넌트의 importimport { Routes, Route } from 'react-router-dom'; a링크의 주소 연결라우터 적용 , url 적용 Home Topics Contact Route 의 path 가 a의 href의 위치와 같도록 지정.path는 주소 url에 추가되는 요소를 말한다.  }/> }/> }/>  위의 a 링크와 연결된 것이 확인 가능하다. 마치 tab처럼 구현된것 같다.하지만 페이지 새로고침되듯 ..

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 ( ..