728x90 반응형 React7 리액트 - 어쩌다 만들어졌을까? 리액트 어쩌다 만들어졌을까? 웹 프로젝트가 커지면서 자바스크립트 파일이 넘쳐나 코드 보기가 난해하고 통제하기 어려워지게 되었다. jQuery, Angular.js, backbone.js등이 만들어졌고 웹브라우저마다 자바스크립트를 불러오는 방식이 달라 브라우저들간의 통일성을 가지도록 도와줬고 통일성을 가지도록 만들어졌다. Single Page Application 전통적으로 웹 페이지는 모든 페이지마다 HTML, CSS, Javascript 파일을 각기 가지고 있어야 했고, 따라서 페이지 간 이동을 할 때마다 HTML, CSS, Javascript 파일을 서버와 주고받았기 때문에 속도가 느릴 수 밖에 없었다. Single Page Application은 HTML, CSS, Javascript 파일을 최초 .. 2021. 5. 12. state App.js state를 활용하여 버튼을 누르면 값 증가 또는 감소하기.. import React from 'react'; class App extends React.Component{ state ={ count: 0, }; add = () => { this.setState({count: this.state.count + 1}); }; minus = () =>{ this.setState({count: this.state.count -1}); }; render(){ return ( the number is: {this.state.count} Add Minus ); } } export default App; state에 conunt를 선언하고 자바의 갯터 셋터처럼 설정함. add, minus에 this.st.. 2020. 6. 11. map(); javascript 함수 friends.map(function(friend){ return friend +"🤣";}) 2020. 6. 5. props 컴포넌트에서 컴포넌트로 전달하는 데이터 App.js function Food({fav}){ return I like {fav} } function App() { return( Hello ); } 결과 2020. 6. 4. 리액트 기초개념 JSX 컴포넌트란? 자바스크립트와 html을 조합한 JSX라는 문법을 사용해서 만든다. src폴더 안에 Potato.js라는 이름의 새로운 파일을 만든다. import React from 'react'; function Potato() { return I love Potato ; } export default Potato; index.js에 import from './Potato'; // 추가 해준다. ./는 현재파일이 있는 폴더라는 뜻이다. 추가 import React from 'react'; import Potato from './Potato'; function App() { return( Hello ); } export default App; 실행 화면 ***App 컴포넌트 안에 Potato 컴.. 2020. 6. 3. 리액트 동작원리 App.js 살펴보기 import React from 'react'; function App() { return Hello!!!! } export default App; index.js 살펴 보기 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root')); ReactDOM.render( , document.getElementById('root')); ReactDOM.render --> 그린다 를 ID가 document.getElementById('root')); index.html 프로젝.. 2020. 6. 3. 이전 1 2 다음 728x90 반응형
