선택n집중

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 값을 ..

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

JSX 변수의 종류 컴포넌트 안에서의 선언된 변수를 사용할때 중괄호를 사용하였다.중괄호를 사용하는것은 컴파일을 통해서 , 순수 자바스크립트의 문서로 변환하는 부분에 대한 표식이자,중괄호를 사용함으로서 이부분은 자바스크립트의 형태야 . 라고 명시적으로 알 수 있다. export default function Body (){ let bl1 =true, bl2=false; let n1 = 11 , n2 = 22; let s1='안녕하세요~' , s2='React & JSX'; let obj = { id : 'banana', name : '바나나' }} 컴포넌트 안에 boolean 형 , number 형 , string 형 , object 형의 케이스를 보고 ..