선택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처럼 구현된것 같다.하지만 페이지 새로고침되듯 ..

라우팅에 대해 알아보자. 라우팅이란경로를 지정하는 과정. 페이지 라우팅이란 요청에 따라 적절한 경로를 반환하여 페이지를 이동하는 과정을 말한다. 업무적인 방식의 차이로 나눈다면 ,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 ( 이름 ..

컴포넌트의 생애주기 (LifeCycle) UI를 구성하기 위해서는 화면에 컴포넌트를시작(최초의 랜더링) ,  - Mounting값이 바뀌면 업데이트(리랜더링) , - Updating  삭제(또는 변경(즉 삭제후 새로운 시작))로 - Unmounting(unmounting 이후 새로운 Mounting)이루어 져있다.함수형 컴포넌트는 이의 생애주기마다 실행할 수 있는 훅이 존재한다. 바로 그 훅이 useEffect.최초 랜더링에만 이런 함수를 실행해줘 ,=> Mounting : 컴포넌트를 페이지에 처음 랜더링 할때  이 값만 바뀌었을때 이런 함수를 실행해줘, => Updating : State, Props 값이 바뀌거나 부모컴포넌트가 리랜더 하면서 자신도 리랜더 될때 이 컴포넌트가 없어질때 이런 함수를 실행..

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

부모 state의 상태값을 하위 컴포넌트로 전달해보자.과제 1. 숫자를 1증가시키는 버튼 , 숫자를 1 감소 시키는 버튼을 만들자.나오는 값을  하위컴포넌트에서 판단하여 짝수인지 홀수인지 출력하자. const [number, setNumber] =useState(0); const onDecrease = ()=>{ setNumber(number-1); }; const onIncrease = ()=>{ setNumber(number+1); }; return ( ** Props 와 State Test ** state 변수: {number} Props 로 number 값을 ..

과제 1.사용자가 - 버튼을 누르면 -1 감소사용자가 + 버튼을 누르면 +1 증가0보다 작아지면 alert 경고창 활성화20 보다 커지면 alert 경고창 활성화화 함께 0으로 초기화import { useState } from "react";export default function Body (){ const [count , setCount] = useState(0); const onDecrease = ()=> { if(count{ if(count>=20){ alert('!!!용량 초과 리셋됩니다.'); setCount(0); }else{ setCount(count+1); } ..

React의 이벤트 처리1. 이벤트 리스너의 카멜 표기 (낙타 표기법)- onClick , onChange ...2. 콜백 함수 처럼 함수의 객체 참조 (주소값을 기술).3.기본 이벤트 제거할것.- a 링크 와 form 태그의 submit- 기본이벤트 제거 ( return false 대신 e.preventDefault() 명시적으로 호출해야함 )  HTML 의 클릭이벤트와 JSX의 클릭 이벤트 차이HTML의 클릭 이벤트 : onclick=clickTest();JSX의 클릭 이벤트 : onClick={clickTest}  콜백함수(banana)의 사용과 객체 참조형 함수(apple).    const clickTest = (e) =>{ alert(`안녕하세요 = ${e.target.nam..