REACT (4) 썸네일형 리스트형 React_0강 React React는 메타(메타 플랫폼, 페이스북)에서 개발한 웹/앱의 View를 개발할 수 있는 오픈 소스 라이브러리이다. 자바스크립트 라이브러리이며, 기본적으로 모듈형 개발이기 때문에 생산성이 높아 현재 대세라 볼 수 있다. 사용자가 조작하기 위한 UI, UI를 컨트롤하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지로 분류해 개발하는 패턴 중 하나가 바로 여태까지 배웠던 MVC 패턴이다. 여기서 React는 사용자가 조각하기 위한 UI 만들기를 도와준다. React가 가지는 특징은 다음과 같다. 선언형이다. 컴포넌트 기반으로 재사용성이 뛰어나다. Virtual DOM(가상돔) 기반으로 가볍게 사용할 수 있다. 컴포넌트는 state와 props을 가진다. 선언형인 React는 컴포넌트를 얻.. ES6_3강 문법(3) 1. Class 객체를 생성하기 위해 템플릿을 작성하는 문법으로 자바의 class와 유사하다. 문법) class MyClass { constructor(member1, member2) { this.member1 = member1; this.member2 = member2; } function( ... ) { ... } } constructor = 생성자 2. import와 export Javascript 응용프로그램의 성능 향상을 위한 기법이다. 별도의 재사용 가능한 구성 요소(객체, 값 등)을 작성하고, 코드를 모듈화하여 처리할 수 있다. import : 정의된 모듈화 코드를 불러오는데 사용 export : 모듈화된 코드를 정의하는데 사용 참고) 실행하기 위해선 http-server를 설치하.. ES6_2강 문법(2) 1. 화살표 함수(=>) 함수 표현식을 화살표 함수로 표현할 수 있다. 함수를 간결하게 작성할 수 있는 방식으로, 가독성 및 유지 봇성을 높이는 방식이다. 변수 = (매개변수) => { ... }; const func = (p) => { ... }; 매개변수가 하나일 경우 괄호를 생략 const func = p => { ... }; 매개변수가 없거나 둘 이상일 경우 괄호 필수 const func = () => { ... }; const func = (a, b) => { ,,, }; 정의부에 return [값 || 식] 뿐인 함수는 return과 {, }를 생략 const func = function(p) { return p + 1; }; const func = p => {p + 1}; cons.. ES6_1강 문법(1) 1. let, const 키워드 var 한 가지만 사용하던 변수 선언에 추가된 키워드이다. * 호이스팅(hosing) : 사용을 먼저, 선언은 나중에 2. 템플릿 리터럴 let a = 10; -> 10을 리터럴 `(back tick)을 사용하여 변수의 값을 리터럴처럼 사용한다. 변수의 값을 출력할 때는 '${변수}'를 입력한다. ex) /ES5 var str1 = ', '; var str2 = 'World!'; var str3 = 'Hello' + str1 + str2; //출력 : Hello, World! //ES6 let str1 = ', '; let str2 = 'World!'; let str3 = `Hello${str1}${str2}`; 3. 구조 분해 할당(Spread) 객체나 배열에.. 이전 1 다음