전체 글322 JSX JSX : 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다. 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. function App() { return ( Hello backgroundColor import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const name = '리액트'; const style = { //background-color는 backgroundColor 카멜 표기법 backgroundColor : 'black', color: 'aqua', fontSize: '48px', //fon.. 2019. 10. 24. 코드 import React from 'react'; 리액트를 불러와서 사용할 수 있게 만들어 준다. 리액트 프로젝트를 만들 때에는 node_modules라는 디렉토리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치 된다. import를 통해 리액트를 불러오게 된다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이며 이는 Node.js에서 지원하는 기능이다. Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러온다. 이러한 기능을 브라우저에서 사용하기 위해서 번들러를 사용한다. 번들러는 파일을 연결해 준다. 주로 사용하는 번들러는 WebPack이다. 번들러 도구를 사용하면 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 .. 2019. 10. 24. 토비 스프링 - 템플릿 / 콜백 템플릿 : 프로그래밍에서는 고정된 틀안에 바꿀 수 있는 부분을 넣어 사용하는 경우를 말한다. JSP는 HTML이라는 고정된 부분에 EL과 스크립릿이라는 변하는 부분을 넣은 일종의 템플릿 파일이다. 템플릿 메소드 패턴 : 고정된 틀의 로직을 가진 테플릿 메소드를 슈퍼클래스에 두고, 바뀌는 부분을 서브클래스의 메소드에 두는 구조로 이루어진다. 콜백 : 실행되는 것을 목적으로 다른 오브젝트의 메소드에 전달되는 오브젝트. 파라미터로 전달되지만 갑을 참조하기 위한 것이 아니라 특정로직을 담은 메소드를 실행시키기 위해 사용된다. 자바에서는 메소드 자체를 파라미터로 전달할 방법은 없어 메소드가 담긴 오브젝트를 전달해야 한다. 다른 말로 펑셔널 오브젝트라고도 한다. 2019. 10. 23. react 설정과 JSX 특징 Bable : ECMA6를 5로 변환시켜 호환을 지원해준다. react : component reactDOM : rendering 15이상부터 2가지 모두 필요 class ES6에서 새로 추가된 문법 class 선언 class Polygon { constructor(height, width) { this.height = height; this.width = width; } } static과 상속도 가능하다. 모든 React.Component는 render() 메소드를 가지고 있다. 컴포넌트가 어떻게 생길지 정의해준다. JSX 형식 React JSX는 XML 같은 문법을 native JavaScript로 변경해준다. ""로 감싸지 않는다. ()를 사용하지 않아도 오류 발생하지 않으나 가독성을 위해서 사용 .. 2019. 10. 21. 이전 1 ··· 41 42 43 44 45 46 47 ··· 81 다음