[React] JSX https://reactjs.org/docs/introducing-jsx.html Introducing JSX – React A JavaScript library for building user interfaces reactjs.org - JSX가 없었을 때는 위와 같이 코드를 작성했음 - 자바스크립트 코드 위에서 간단하게 HTML처럼 할 수 있도록 만들어진게 JSX HTML과 JSX의 차이 - JSX에서 클래스name 지정할 때 className, onClick처럼 대문자로 작성 - HTML은 마크업 언어, JSX는 엄밀히 말하면 자바스크립트 코드 - Babel이 HTML과 자바스크립트로 변환 시킴 - JSX는 자바스크립트 코드다. - JSX는 비즈니스로직을 작성할 수 있음 [React] react-dom react-dom - 리액트는 순수 자바스크립트이고 이 자바스크립트들을 이용해서 컴포넌트들을 만들어 나감. - 실제로 브라우저는 HTML, CSS, 순수JS 만을 이해하고 이용이 가능함 - 결국 Babel을 이용해서 순수 JS로 변환됨. 변환된 것들은 컴포넌트를 HTML과 연결할 수 있도록 해야하는데 react-dom이 그걸 가능하게 해줌 - 사용자에게 궁극적으로 배포되어 지는 것은 index.html - id="root" root라는 아이디를 이용해서 JS와 연결함 - 그것을 가능하게 하는 것은 react-dom import ReactDOM from 'react-dom' -> 'react-dom' 라이브러리에서 ReactDom 클래스를 가져옴 -> 가져온 클래스를 render함수를 이용해서 docume.. [ES6] Block scope ES6의 정석 - 노마드 코더 Nomad Coders ES6, ES7, ES8 nomadcoders.co - let과 const의 장점은 block scope로 되어 있는거임 (scope는 기본적으로 버블임) - block안에서만 존재함( block은 {}로 만들어짐) - {} 안에서는 정의된 let과 cont는 block 밖에서는 존재하지 않는거임(안에서 보호 받을 수 있음) - var은 block을 뛰어다님(block scope를 가지고 있지 않기 때문) - function scope를 가지고 있음. function scope는 var가 function 안에서 접근할 수 있다는 의미 - var은 다른 function에서 접근하는 걸 막아줄 순 있지만, 다른 구문에서 접근가능해서 문제가 생김 [ES6] Temporal dead zone ES6의 정석 - 노마드 코더 Nomad Coders ES6, ES7, ES8 nomadcoders.co - temporal dead zone은 let과 같이 소개되는 개념임 - temporal dead zone이 없을 때는 - hoisting은 JS가 프로그램 실행 전 어딘가로 이동시키는거임(무조건 위에서 아래로 실행되지않음) - 이렇게 코드를 작성하면 JS 내부에서 hoisting 처리를 하는데 var을 제일 위로 올려쥼 - hoisted는 그들이 제일 위로 올라가는 걸 의미함 - 위 멍청한 코드는 애플리케이션 실행시 error 처리를 하지 않음 - 그래서 let을 써야함 - 위 코드에서 var 대신 let을 사용하면 error을 발생시켜서 변수가 정의되지 않았다고 에러를 발생시키고, hoisting.. [React JS] 컴포넌트(Component)? 1. - App.js에는 App()함수가 정의되어 있다. App() 함수는 반환값을 가지고 있는데, 반환하는 HTML이리액트 앱 화면에 그려진다. - App.js는 리액트가 동작하면 함께 동작할 컴포넌트 중 하나이다. 2. - 위 코드 3,5 라인에는 App컴포넌트를 임포트하여 사용하였다. - 5번 라인에 있는 HTML태그처럼 생긴 을 ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App컴포넌트가 반환하는 것들을 화면에 그릴 수 있다. - 5번 라인 해석 : App 컴포넌트는 아이디가 root인 엘리먼트에 그려질 것이다. (render : 그린다) 정리 - 리액트는 컴포넌트와 함께 동작한다. - 리액트는 모두 컴포넌트로 구성된다. [REACT] 컴포넌트(Component)? 이전 1 2 3 4 ··· 15 다음
