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

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

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 형의 케이스를 보고 ..

props? 컴포넌트에 임의의 프로퍼티와 값을 지정하여 객체 형태로 전달.매개변수의 참조를 통해 컴포넌트의 프로퍼티를 필드형식으로 참조가능. TestReact 라는 컴포넌트를 실행할건데 , value에 1이라고 지정할게.function TestReact(props) { return 테스트 {props.value1};}매개변수로 객체를 전달받아 , 실행에서의 props.value1 의 형태를 볼 수 있다.  props 의 구조분해 할당 이전의 객체의 구조분해 할당 케이스를 보았다.프로퍼티와 변수명이 같다면 , 변수에 프로퍼티의 값이 할당되는 개념이였다.case 1  function TestReact({value1, value2}) { return ( 테스트..

컴포넌트란 ?JSX 형식으로 구성된 HTML 요소들을 함수 또는 클래스 형태로 그룹핑하여효율적인 랜더링 수행을 위한 리액트의 요소.최근에는 함수형태로 컴포넌트를 만들고 클래스의 형태는 지양한다. 컴포넌트는 대문자로 시작하는것이 명시적 규칙.소문자로 시작할 경우 컴파일 에러가 발생됨.( 일반적 함수 호출 형태는 문제 되지 않음.)사용시 구분자 "/" 가 와야함. - 사용형식 또는     사용시 함수 형태로도 가능함.Component() 모듈내 컴포넌트가 하나인 경우 모듈명과 파일명을 동일하게 처리하는것을 권장한다.1파일 1컴포넌트가 일반적이기 때문에 명시적이며 직관적으로 파일명과 컴포넌트 명을 통일하자.   return 의 형태들은 1 덩이를 반환한다면 , 중괄호와 return 이 생략 가능return 테..

리액트란 ? 웹 프레임 워크 , 자바스크립트의 라이브러리의 하나.싱글페이지 애플리케이션(SPA)을 제작한다. 리액트는 왜 쓰는걸까 ?html,CSS,javascript를 상호적으로 한꺼번에 사용할수 있다.  리액트의 설치 ,  node.js node.js 를 설치하여 리액트를 사용한다.node.js 란 , 브라우저 외에서 자바스크립트를 실행 할 수 있도록 도와주는 자바스크립트 엔진. node 의 패키지 매니져 , npm패키지란 ? 라이브러리들의 묶음. node.js 설치 이후 리액트 설치 가능react 전용 작업 폴더 생성하여 vscode 탐색기에 로드vscode 터미널 설정npm install create-react-app - 리액트 프로젝트 생성을 위한 앱 설치npx create-react-app m..

자바스크립트에서 가장 큰 목적은 무엇이였을까 ?html에서 구조를 , CSS에서 모양을 만들었다면,자바스크립트를 통해 동적인 액션을 구현한다는 것이다. 이 동적인 액션들이 내가 원할때 실행되어야하고 , 원하지 않을때 실행되지 말아야하며연산을 하는 도중에 값이 도출될 수 없듯 일에 순서와 절차를 만들어 줘야한다. 하지만 자바스크립트는 현재 어떻게 움직이고 있을까 ?상단부터 하단으로 순차적으로 읽어 들어가지만,여러가지의 함수나 실행이 어느 한 로드가 틀어지게 된다면 실행이 얽힐 수 있을것이다. 예를들어 여러개의 setTimeout 함수를 실행시킬때전부다 1초의 시간을 준다면 어떻게 됬을까 ?로드에 맞춰 실행 시작하면서 , 모든 함수가 로드 후 1초후에 실행이 마쳤다.그 말은 즉, 함수의 실행 시점이 같다는 ..

구조분해 할당이란 구조분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는 표현식이다.  객체 구조분해 할당  let sandwich = { bread:"더치 크런치", meat:"참치", cheese:"스위스", toppings:["샐러리","토마토","머스터드"] }sandwich 라는 객체가 있다.이 속성값을 변수에 저장해보자. let { bread, meat } = sandwich; console.log(`** before => ${bread}, ${meat}`);let {bread 와 meat} 는 변수 bread 와 meat 이다.속성과 변수명이 같다면 , 그에 속성값을 할당 받을 수 있다. 추후에 ..