"리액트 앱 만들기" 글에서 만든 앱의 파일 구조
글 링크 : http://fors.tistory.com/414
리액트를 사용하면 UI를 재사용 가능한 컴포넌트로 분리 할 수 있다고 한다.
화면의 <div> , <header> <p> 같은 여러가지 부분들을 app.js에 작성 할 수 있다는 말이다.
구조는 express.js 를 사용 했을 때 ejs 파일과 약간은 비슷한 느낌이었다.
템플릿 엔진과 비슷하다.
app.js 를 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import React, { Component } from 'react'; // react 를 import import logo from './logo.svg'; import './App.css'; // logo와 css 를 불러온다. class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } } export default App; | cs |
이렇게 app.js 처럼 클래스를 통해서 컴포넌트를 만들게 된다.
이 때 주의사항이 있다.
1. 클래스 형태로 만들어진 컴포넌트에는 반드시 render 함수가 있어야 한다.
2. 내부에서는 JSX를 return 해줘야 한다.
여기서 JSX : javascript + xml 을 합쳐서 만들어진 자바스크립트의 확장 문법
jsx의 장점 : 개발자가 자바스크립트 내부에 마크업 코드를 작성 할 수 있게 해준다.
지금 app.js처럼 자바스크립트 코드 안에 html 이 들어간다.
app.js 의 마지막 줄을 보면 export가 있다.
export default App;
작성한 jsx를 다른 곳에서 사용할 수 있도록 내보낸다.
node js 를 해본 사람이라면 이미 알 것이다.
이제 index.js 도 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister(); | cs |
4번째 줄을 보면
import App from './App';
이렇다.
visual studio code에서 저 ./App을 ctrl + 클릭하면 app.js 로 간다.
브라우저상에 react 컴포넌트를 보여주기 위해서는 ReactDOM.render 함수를 사용한다.
ReactDOM.render 함수는 7번 줄에서 호출하고 있다.
ReactDOM.render(<App />, document.getElementById('root'));
이 함수는 파라미터가 2개이다.
앞에 있는 파라미터 <App />
뒤에 있는 파라미터 document.getElementById('root');
각각 의미하는 바는 이렇다.
<App/>은 렌더링 할 결과물
document.getElementById('root') 는 컴포넌트를 어떤 DOM에 그릴지 정한다.
이렇게 작성하면 id가 root인 DOM을 찾아서 그려준다.
<div id = "root"> 이런 것 말이다.
create-react-app 을 사용해서 만들면 index.html 파일이 있다.
여기에 id가 root인 항목이 있다. 28번 줄. 저 자리에 렌더링한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html> | cs |
정리.
리액트를 쓰면 app.js 에 html 코드의 여러 부분을 분리해서 적을 수 있다.
방법은 2가지.
1. 클래스 형태로 만들기
2. 함수를 통해서 만들기
1. 클래스 형태로 만들기는 주의사항이 있다.
주의사항 1. app.js 에 render 함수가 반드시 있어야 한다.
주의사항 2. app.js 내부에서 jsx 코드를 return 해야 한다.
index.js 에서는 ReactDOM.render 함수를 호출한다.
호출한 render 함수는 페이지 DOM 에 내용을 렌더링한다.
jsx 살펴보기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return ( <Fragment> <div></div> </Fragment> ); } } export default App; | cs |
보통 이런 식으로 render() 함수 안에 내용 적으면 된다.
자바스크립트 값도 써보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return ( <Fragment> <div> hello {name} {/* 주석 처리는 이렇게. {name} 을 쓰면 line4 의 const name 을 쓸 수 있다.*/} </div> </Fragment> ); } } export default App; | cs |
값은 return 위쪽에서 선언하고 return 안에서 { } 중괄호로 쓰면 된다.
삼항 연산자는 어떻게 사용하는지 살펴보자.
아래 line 7부터 10까지 삼항연산자에 관한 코드가 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return ( <div> { 1+1 ===2?(<div>right</div>) : (<div>wrong</div>) // 삼항 연산자를 사용하는 방법 } hello {name} </div> ); } } export default App; | cs |
그럼 이제 AND 연산도 보자.
코드를 &&로 고쳐줬다.
함수는 이렇게 쓰면 된다.
보통 이런 경우에 로직은 jsx 밖에 적는게 좋다.
그러나 꼭 return 안에 적어야 겠다면 이렇게 적을 수 있다.
함수의 선언 뒤에 () 를 적어줘야 함수가 호출된다.
안 그러면 그냥 함수가 정의만 된다. 호출이 안된다.
이렇게 함수의 뒤에 ()를 붙여주는 것을 IIFE(즉시 실행 함수 표현) 이라고 부른다.
근데 ES6 문법에서는 화살표 함수를 많이 쓴다.
아래 처럼.
jsx에서 css는 어떻게 작성할까
아래 코드를 보자.
return 위에 const style 상수에 css 속성을 담는다.
아래 <div> 태그를 보면 style 에 {style} 이 대입되어 있다.
이렇게 속성을 지정하고 태그에 대입하면 된다.
css 를 외부에 작성 할 수도 있다.
App.css 파일 내용
app.js에 App.css 의 내용을 추가한다.
css파일을 import 한다.
css파일에서 class로 선언 한 것은 className 으로 쓰면 된다.
id로 선언한 것은 id 로 쓰면 된다.
끝.
'JavaScript│Node js' 카테고리의 다른 글
| React componentWillMount , ComponentDidMount 메소드 (0) | 2018.11.09 |
|---|---|
| 리액트 props , state (0) | 2018.11.08 |
| 리액트 앱 만들기 (0) | 2018.11.07 |
| 프로그레시브 웹 앱 개요 , 만들기 - Progressive web app (0) | 2018.11.07 |
| 함수형 자바스크립트 프로그래밍 (0) | 2018.10.23 |
댓글