선택n집중

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 이다.속성과 변수명이 같다면 , 그에 속성값을 할당 받을 수 있다. 추후에 ..

this ?자바스크립트에서는 this 가 어디에서 사용되느냐에 따라 달라진다.사용처가 어디인지 그 위치에 따라 this 가 가르키는 것이 달라지기 때문에 유의해서 사용해야한다. 일반 함수에서의 this 는 주체가 되는 객체를 가르키지만,화살표 함수의 this 는 window 객체를 가르키게 되기 때문에 ,undefined 를 반환한다.화살표 함수 화살표 기호를 활용하여 간단하게 함수를 정의할 수 있으며 ,이름이 없고 this를 활용할 수 없다.메서드에서 화살표 함수가 지원되지 않았지만 , ES6부터 지원이 되게 되었다. -매개변수가 없는 경우 : 괄호 생략 불가능let foo = () => console.log('bar'); // let foo = function() { console.log('..

비정상적 동작에 대한 처리.foo(); 라고 있지도 않는 함수를 실행시켰다면 , 함수 실행 구문전까지 실행되다가 멈춘것이 확인이가능하다. 자연스럽게 실행의 흐름을 만들기 위해서try ....catch 의 구문을 사용한다.try 안의 반복문과 반복문안의 try 를 구분해보자. -반복문 안의 try let num = [0, 25, 100, 99, 111]; // => 기본구문 for (let a of num) { try { if (a == 0 || a > 100) { throw new Error(`숫자가 0이거나, 100보다 큽니다.`); }else { console.log(`${a}*${a} = ${a*a}`); } ..

Set 이란 ?value 값을 저장하고 , 중복을 허용하지 않는 컬렉션이다.중복일 경우 중복값은 인지하지 않는 특징을 지녔다.대소문자를 구분해 대문자 소문자는 다른 값으로 인지한다.값의 순서가 인지되지 않는다. 대체 Set , 왜사용하는걸까 ?한마디로 Set 는 , 순서가 없고 , 중복되지 않는 데이터의 집합이라고 할 수 있다. 배열과의 차이점을 인식하여야 하는데,배열은 데이터를 순서 있게 저장하고 , 순서를 알고 있기에 인덱스를 통한 접근이 가능하다.값이 중복되더라도 배열은 인덱스가 다르기 때문에 저장이 가능하다. Set 객체의 메서드요소 추가: Set.add(value)요소 일부 삭제: Set.delete(value)요소 존재 확인: Set.has(value)요소 갯수 확인: Set.size요소 전체..