https://goddaehee.tistory.com/296 JSX란? - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. ㄴ es6를 es5로 변환 - JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. - 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.(주관적인 관점) JSX 문법 1. 주석 alt + shift + a {/* */} 2. return 구문은 반드시 1개여야 합니다. 반드시 하나의 태그를 리턴해야합니다. ex..

html의 컴포넌트 EX) body -> form -> input 리액트의 컴포넌트의 형태 (Tree구조) App/ -> app.js 최상위 컴포넌트 딱 1개만 있어야함 수정시 리랜더링을 하지 않으려고 나눔 https://goddaehee.tistory.com/299 리액트 컴포넌트 - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. - 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. - 컴포넌트 이름은 항상 대..

node.js다운로드 설치 https://nodejs.org/ko/ 계속 next 눌러서 설치! 파일 위치 변경 vscode 들어가서 Open Folder... react 폴더 잡아주기 create-react-app으로 프로젝트 생성하기 vscode에 terminal 들어가서 node -v 입력 프로젝트 시동하기 그리고 생성한 프로젝트로 위치를 바꿔준다. cd react-basic 위치를 바꿔준 후 프로젝트 시동하기! npm start

1. 리액트란? - 리액트는 자바스크립트 라이브러리입니다. - 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 입니다. * 프레임워크 : 뼈대, 라이브러리의 모음집 * api : 라이브러리의 사용방법 SPA란? - Single Page Application의 줄임말 입니다. : 기본적으로 화면을 하나만 가지고 만들어낸다는 뜻입니다. - index.html하나만 로드하고 실행시키는 구조입니다. 어떻게? 번들러(Webpack)가 이 모든것을 해줍니다. 노트js에서 자동구성 Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구입니다. 번들러는 node.JS를..

/* * 모듈 익스포트, 임포트 - 모듈은 js ES6의 미리작성해 놓은 스크립트 파일입니다. - 변수 , 함수 ,클래스 등이 정의 되어있습니다. - 모듈을 내보내는 방식 - 여러 값을 내보낼 때 named export 방식 - 단일 값을 내보낼 때 default export방식 */ export const name = "이순신"; export const age = 20; export const info = () => { console.log('이름 '+ name + ', 나이 '+ age); } let addr = "서울시"; let myInfo = () => { console.log(addr); } export {addr, myInfo}; --- class Person { constructor(nam..

class 일반 HTML에서는 굳이 class를 사용하진 않습니다. React의 class컴포넌트를 사용한다면 알아두세요. 1. 클래스의 멤버변수를 선언할 때는 키워드를 사용하지 않습니다. (구형브라우저에서는 지원불가 할 수 있음) class Person { //멤버변수 name = "홍길동"; age = 20; //객체변수 state = {a:1}; //생성자는 js에서 반드시 1개입니다. //JS는 this키워드를 지칭하면 멤버변수가 자동생성 됩니다. constructor(addr){ this.addr = addr; } //함수 func = () => { console.log("func 실행"); } } //객체로 생성 - 허용됩니다. let p = new Person(); console.log(p...

화살표 함수 https://coding404.tistory.com/11 JS ES6 문법 한눈에 보기 1. let과 const let변수는 중복선언이 불가능하다. let변수의 유효범위는 {}블록이다. //let변수는 같은 블록에서 내에서 중복이 불가능하다. let y = 1; // let y = 100; //에러 //let변수의 유효범위는 {}블록 coding404.tistory.com 1. 화살표 함수는 기본적으로 익명함수를 대체합니다. (호이스팅 불가) 2. 가독성이 향상됩니다. //기본적으로 익명함수를 대체합니다. //익명함수는 당겨쓰기가 안된다. // var a = function(){ // console.log("a실행"); // } let a = () => { console.log("a 실행"..

기존의 for 문 let arr = ["a", "b", "c"]; //기존의 for문 for(let i = 0; i < arr.length; i++) { console.log(arr[i]); } for(let i in arr) { console.log(arr[i]); //i는 인덱스를 담아준다 } 기존의 foreach 메서드 forEach 메서드란 ? forEach() 메서드는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. map()메서드와 거의 비슷하지만 차이점은 따로 return하는 값이 없다는 점이다. //기존의 foreach메서드 arr.forEach(function(value, index, arr) { console.log(value); c..