키모스토리

App.js (배열데이터를 ,react에서 반복 표시)import "./App.css";function App() { const list = [1, 2, 3]; return ( {list.map((n) => ( {n} // key 속성 추가 ))} );}export default App;

JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다.  JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 기본적으로 HTML, JS, CSS 구문을 그대로 이용이 가능하며{ } 블럭 안에서 변수, 상수, 함수 등을 호출하여 사용 할 수 있다. JSX 기초(1) App() 함수 밖에 혹은 안에 변수, 상수, 함수 선언가능 (2) return 시에 하나의 Dom만 리턴할 수 있다. (하나의 Dom안에 구조를 생성하라) (3) if문 사용안됨, 대신 3항 연산자를 사용 ( (조건) ? 참일때 : 거짓일때 ) (4) 조건부 렌더링 (조건 && 값..

arrow function함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법// Before Arrowlet sum1 = function(a, b) { return a + b;};console.log(sum1(10, 20));// With Arrow Function:let sum2 = (a, b) => a+b;console.log(sum2(10, 20));(a, b) => a + b는 인수 a와 b를 받는 함수입니다.(a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환합니다. 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.let double = n => n * 2;// let d..