선택n집중

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

라우팅에 대해 알아보자. 라우팅이란경로를 지정하는 과정. 페이지 라우팅이란 요청에 따라 적절한 경로를 반환하여 페이지를 이동하는 과정을 말한다. 업무적인 방식의 차이로 나눈다면 ,SSR 방식 (서버가 만들때) 과 CSR 방식 (클라이언트가 만들때)우리는 리액트를 이용하고 고객의 클릭에 의해 화면 조정이 되기때문에 CSR 방식이다.CSR 은 처음 로드시에 모든 페이지에 관련된 코드들이 들어와야해서 느리지만.추후에 가지고 있는 코드들을 그때그때 호출하기 때문에 화면 전환에 훨씬 빠르다는 장점이 있다. 사용자가 요청하는 url에 해당하는 페이지가 이동하는 것처럼 보이지만,전체적인 컴포넌트가 교체가 되는 것이다.웹 애플리케이션에서 사용ㅈ가 다른 웹페이지로 이동하거나 다른 뷰로 전환하는 것을 관리하는 프로세스를 ..

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

과제 1. (useRef)이름과 전화번호의 입력창을 받는다.각각 등록버튼이 있고 그 값을 저장한다.이름을 입력후 등록을 누르면 input 창이 비활성화 되고 다음 전화번호의 입력창으로 간다.전화번호의 입력창을 등록하면 전화번호도 input창이 비활성화 된다.  값을 저장하는 방법으로 state의 값을 onClick 이벤트를 통해 받아오는 방법도 있으나이번에는 해당하는 창을 비활성화 할 수 있게 ref 를 사용해보자. 1.useRef 의 선언.import { useRef } from 'react'; 2. 컴포넌트 retrun 제작return ( 이름 ..