본문 바로가기
반응형

JavaScript49

03.JSX의 기본 규칙 알아보기 JSX란? - 리액트에서 생김새를 정의할 때, 사용하는 문법 - 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript return 안녕하세요; 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환 ※Babel 은 자바스크립트의 문법을 확장해주는 도구 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할 규칙 꼭 닫혀야 하는 태그 - 태그는 꼭 닫혀있어야 함 import React from 'react'; import Hello from './Hello'; function App() { return ( ); }.. 2021. 6. 30.
02.나의 첫번째 리액트 컴포넌트 Hello.js import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; - 리액트 컴포넌트는 함수형태로 작성 할 수도 있고 클래스형태로도 작성 할 수 있음 - 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부름 리액트 컴포넌트를 만들 땐 import React from 'react'; 를 통하여 리액트를 불러와야 함 코드의 최하단 export default Hello; 이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( .. 2021. 6. 30.
01. 리액트는 어쩌다 만들어졌을까? 대부분의 경우 웹 애플리케이션의 규모가 커지고, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움 Ember, Backbone, AngularJS 등의 프레임워크들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결 하지만 리액트의 경우에는 조금 다른 발상에서 만들어 짐 리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아닌, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작 모든걸 다 날려버리고 모든걸 새로 만들게 된다면? 속도가 굉장히 느릴 것 리액트에서는 Virtual DOM 이라는 것을.. 2021. 6. 30.
22.(HTML 과 JavaScript 연동) 모달 만들기 안녕하세요! 내용내용내용 버튼 열기 안녕하세요! 내용내용내용 버튼 열기 안녕하세요 모달 내용은 어쩌고 저쩌고.. 닫기 body { font-family: sans-serif; } .modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal { background: white; padding: 24px 16px; border-radius: 4px; width: 320px; } .modal-title { font-size: 24px; font-weig.. 2021. 6. 30.
반응형

티스토리툴바