선택n집중

컴포넌트의 생애주기 (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..

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