WannaBeDeveloper

1. JSX로 리액트 element 정의하기 JSX는 javascript의 확장으로 HTML과 비슷한 구문을 사용해 리액트 element를 정의할 수 있게 해준다. JSX에서는 태그를 사용해 element의 type을 지정하고, 태그의 attribute는 프로퍼티를 표현하며, 여는 태그와 닫는 태그 사이에 element의 자식을 넣는다. JSX element에 다른 JSX element를 자식으로 추가할 수 있다. // 번호가 붙지 않은 리스트에 대한 JSX 연어 500그램 잣 1컵 버터 상추 2컵 옐로 스쿼시 1개 올리브 오일 1/2컵 마늘 3쪽 // JSX에서는 단순히 클래스 이름을 사용해 component를 정의하면 된다. JSX에서 배열을 component로 넘길 때는 중괄호로 감싸야 한다. 이렇..

1. 페이지 설정 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 만들기 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리이다. ReactDOM을 UI에 렌더링하기 위해 사용할 HTML element가 필요하다. script와 HTML element를 추가하는 방법은 다음과 같다. 2. 가상 DOM HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차로, HTML 문서를 이루는 element는 브라우저가 HTML 문서를 읽어 들이면 DOM element가 되고, 이 DOM이 화면에 UI를 표시한다. 전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어져 사용자가 페이지를 na..

1. 함수형 javascript에서는 함수가 1급 시민(멤버)인데, 이는 정수나 문자열 같은 다른 일반적인 값과 마찬가지로 취급할 수 있다는 의미이다. 이로 인해 함수는 변수, 객체, 배열에 넣을 수 있고, 다른 함수에 인자로 넘길 수도 있다. 또한 함수가 함수를 반환할 수도 있다. 함수를 인자로 받거나 함수를 반환하는 함수를 고차 함수라 한다. var createScream = function(logger) { return function(message) { logger(message.toUpperCase() + "!!!"); }; }; const scream = createScream(message => console.log(message)); // 위 함수를 화살표 함수로 나타내면 다음과 같다. c..

1. default parameter ES6 명세에 추가돼 함수의 parameter에 default value를 설정할 수 있다. 모든 type의 value(객체 포함)도 default value로 사용할 수 있다. var defaultPerson = { name: { first: "길동", last: "홍" }, favActivity: "배드민턴" }; function logActivity(p=defaultPerson) { console.log(`${p.name.first}은(는) ${p.favActivity}을(를) 좋아합니다.`); } 2. Arrow function function 키워드 없이 함수를 만들 수 있다. this를 새로 바인딩하지 않는다. var gangwon = { resorts: ..