Coding/React.js
-
[React] - 5) propsCoding/React.js 2019. 11. 8. 16:24
Props props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다. XML의 attribute와 대응한다고 보면 어느정도 맞는 말이라고 할 수 있겠네요. 물론 당연히 리액트에서 그 활용성은 훨씬 다릅니다. props 값은 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. props 렌더링 이전 포스팅에 만들었던 MyComponent.js를 조금 수정해 봅시다. MyComponent.js import React from "react"; const MyComponent = props => { return ( 안녕하세요, 제 이름은 {props.name} 입니다. ); }; export default MyComponent; 이제 부모 컴포넌트인 App.j..
-
[React] - 4) 모듈 Import / Export 하기Coding/React.js 2019. 11. 3. 14:48
모듈 Import / Export 리액트 프로젝트를 생성하면, 자동으로 src 폴더 내에 Index.js와 App.js가 생성됩니다. 자바스크립트로 웹 페이지를 자주 제작해보신 분들은 알겠지만, index.js는 최초 진입 시 실행되는, main의 역할을 하는 부분입니다. 실제로 리액트에서의 index.js를 살펴볼까요? import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); // If y..
-
[React] - 3) JSX 문법Coding/React.js 2019. 10. 29. 15:14
JSX 문법 요소를 감싸야 한다 컴포넌트에 여러 요소가 있다면, 그 요소는 부모 요소에 의해 감싸져 있어야 합니다. import React from 'react'; function App() { return ( h1 h2 ) } export default App; 다음 코드의 경우 제대로 작동하지 않습니다. 이를 실행해 보면 다음과 같은 오류가 뜹니다. 그림 다음과 같은 오류는 h1와 h2를 동시에 감싸주는 코드를 작성하여 해결할 수 있습니다. import React from 'react'; function App() { return ( h1 h2 ) } export default App; 왜 꼭 부모 요소로 감싸주어야 할까요? 그 이유는 Virtual DOM을 사용해야 한다..
-
[React] - 2) JSXCoding/React.js 2019. 10. 28. 16:06
리액트 입문 포스팅은 '리액트를 사용하는 기술' 책으로 시작했음을 밝힙니다. JSX란? 저번 포스팅에서 리액트 서버를 구동하는 데 까지 성공하였습니다. 생성했던 리액트 프로젝트 경로에 /src/app.js를 들어가봅시다. import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 자바스크립트 같지만 다소 낯선 코드가 보입니다. 이는 JSX라는 자바스크립트의 확장 문법입니다. 이러한 코드는 좀 낯설죠? 2017년부터 자바스크립트에서도 import를 사용..
-
[React] - 1) React 시작하기Coding/React.js 2019. 10. 26. 21:33
리액트 입문 포스팅은 '리액트를 사용하는 기술' 책으로 시작했음을 밝힙니다. 리액트란? 자바스크립트의 라이브러리인 리액트는, 다른 Vuejs, Angular 등과 달리 'View'에 중점을 두는 라이브러리 입니다. 리액트는 뷰의 한 요소를 찾아가 내부를 수정하는 것이 아니라, 데이터가 변할 때 마다 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 사용합니다. JSON 객체를 이용한다고 했을때 불필요한 파싱과정, 자식 노드를 찾아가는 과정, 이런것을 그냥 다 날려버리고 새로 만드는 식으로 하는 것이죠 . 리액트는 Virtual DOM 이라는 문서 구조를 사용하여, 데이터가 변하여 웹 브라우저에 DOM을 업데이트 할 때 DOM을 직접 수정하는 것이 아닌 DOM 업데이트를 추상화하여 처리 횟수를 줄이는..