(해당 포스팅은 '2019-06-19' 최종 수정되었습니다.)

안녕하세요, 히니입니다 :)

 

오늘은 React의 핵심인 컴포넌트 생성에 대해 알아보겠습니다.

실습으로 진행되며 코드는 모두 올라와있습니다.

빠른 진행을 위해 코드가 담긴 git 링크도 공유합니다.

다운 받아서 바로 실습하시면 됩니다.

https://github.com/gmldms784/react_study/tree/master/project

 

gmldms784/react_study

all about react. Contribute to gmldms784/react_study development by creating an account on GitHub.

github.com

 


실습 1

 

1. 파일 생성 후 create-react-app 하기

 

2. yarn start

 

3. 화면 확인

 

4. index.html 수정

 

title 변경

 <title>Practice_react</title>

저장 후 확인

5. App.js 수정

> App div 빼고 다 지우고 아무글자나 써보기

>import logo from './logo.svg'; 는 logo.svg 안쓸거니까 지워도 됨

 

확인

6. 컴포넌트 추가

 

목적

hello를 쓰는 기능을 가진 컴포넌트 추가

 

6-1. 파일 추가

src => 컴포넌트이름.css, 컴포넌트이름.js 파일 추가

 

6-2. Hello.js 내용 추가

 

import React from 'react'; // react 사용
import './Hello.css'; // css 포함

function Hello() { // 함수
  return ( // 리턴 값
    <div className="Hello"> // JSX
      hello
    </div>
  );
}

export default Hello; // Hello 함수 내보내기

 

6-3. App.js 내용 변경

import React from 'react';
import './App.css';
import Hello from './Hello'; // 추가

function App() {
  return (
    <div className="App">
      <Hello/> // 추가 => Hello 함수의 리턴 값이 이자리에 들어감
    </div>
  );
}

export default App;

6-4. 저장 후 확인

<div id="root"> // index.js의 root
    <div class="App"> // App.js의 App
        <div class="Hello">hello</div> // Hello.js의 Hello
    </div>
</div>

컴포넌트 추가 방법

 

1. 컴포넌트 파일 추가

2. 컴포넌트 파일에서 export

3. 기존 파일에서 import 후 JSX로 내용 추가

[JSX 링크]

 


 

실습 2

 

1. index.html 파일 변경

<div id="root1"></div>

> 앱 이름 뒤에 1을 붙였음

 

2. index.js 파일 변경

import App1 from './App';

ReactDOM.render(<App1 />, document.getElementById('root1'));

 

3. App.js 파일 변경

import React from 'react';
import './App.css';
import Hello from './Hello';

function App1() { //변경
  return (
    <div className="App1">//변경
      <Hello/>
    </div>
  );
}

export default App1;//변경

 

4. 저장 후 확인

<div id="root1">
    <div class="App1">
        <div class="Hello">hello</div>
    </div>
</div>​

 


 

결과 분석

 

이렇게 import해서 사용하는 JSX의 태그와 (<App1/>)

자식 컴포넌트에서 export하는 함수의 이름이 같으면 됨 (export default App1;)

> 함수가 아닌 class로 컴포넌트를 작성해서 export 해야하는 경우가 있음

> [state, props 링크]

 

 

 


정리

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 'JS & JSX 문법' 입니다.

(해당 포스팅은 '2019-06-19' 최종 수정되었습니다.)

 

안녕하세요, 히니입니다 :)

 

오늘은 React 기본 구조와 소스들을 분석해보고,

리액트에서 어떤 프로세스로 웹페이지를 띄워주는지에 대해 알아보겠습니다.

 


 


 

1. 첫번째 프로젝트 만들기

 

create-react-app first_practice

원하는 폴더명으로 프로젝트 생성

여기서 create-react-app은 명령어 하나로 react 개발환경을 설치할 수 있도록 도와주는 툴체인이다.

 

설치가 종료되면 몇 가지 명령들과 react 시작방법을 알려준다.

 

cd first_practice
yarn start

만든 개발폴더로 이동 후 yarn start를 입력하면 쉽게 react를 시작할 수 있다.

 

이러한 코드들이 차례로 나오고

 

웹브라우저에 localhost 서버, 포트 번호는 3000으로 이러한 페이지가 뜨면 개발환경 준비 완료

 


 

2. 구조 살펴보기

이제 개발 폴더의 구조를 한번 살펴봅시다.

  • node_modules 폴더

npm으로부터 다운로드된 라이브러리를 포함한다.

 

  • public 폴더

favicon.ico // 웹페이지 접속 시, 상단 탭에 보여지는 아이콘

index.html // 최종적으로 웹브라우저에 띄워지는 파일*

manifest.json // json 파일로써 나의 APP이 유저의 장치에 설치될 때, 메타정보를 알려줌

<!--
manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->

 

  • src 폴더

App.jsindex.js의 하위 컴포넌트(div className="App") 생성

index.jsindex.html의 컴포넌트(div id="root") 생성

css는 각각의 js파일을 꾸며주는 역할

serviceWorker.js 는 기존 방문자가 App을 빠르게 로딩할 수 있도록 해줌

https://bit.ly/CRA-PWA 참고

logo.svg 는 (Scalable Vector Graphics, SVG)로 logo를 표현한 것

2차원 벡터 그래픽

XML 기반의 파일 형식

 

  • gitignore파일

말그래도 git에서 무시할 파일(git의 버전관리에서 제외할 파일)을 지정하는 파일

 

  • package.json 파일

프로젝트 정보(이름, 설명, 개발자 등)와 의존성을 관리하는 문서

이미 작성된 package.json 문서는 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해줌

 

  • README.md 파일

사용법 설명

 

  • yarn.lock 파일

package.json에 있는 것보다 많은 정보로 보다 엄격하게 의존성을 관리해줌

[의존성 관리 링크]

 


 

3. 프로세스 분석

index.js

주석을 제외하면 이러한 코드가 나온다.

 

import React from 'react';

React를 사용 가능하도록 해줌

 

import ReactDOM from 'react-dom';

react-dom package는 DOM에 특화된 메소드 제공 / React 모델 외부로 나갈 수 있는 해결책 제공

따라서, index.html로 내보내는 마지막 js파일(React 모델)에 사용한다.

여기서는 index.js 파일에 사용

npm과 ES6를 사용한다면 import ReactDOM from 'react-dom'

npm과 ES5의 경우에는 var ReactDOM = require('react-dom')

 

import './index.css'

css파일 적용

 

import App from './App'

App 이라는 요소를 쓰기 위해서 App.js 파일의 function인 App을 임포트함

App이 class 여도 됨 // 차이는 나중에 나옴

[상태 저장 컴포넌트 / 함수 컴포넌트 링크]

 

import * as serviceWorker from './serviceWorker';

serviceWorker.unregister();

https://w3c.github.io/ServiceWorker

서비스워커 : 브라우저의 백그라운드에서 실행되는 js워커

PWA 생성 시 오프라인에서도 사용가능하고 푸시 알림 기능도 사용할 수 있게 해줌

(서비스워커 설명 링크)

 

ReactDOM.render(<App/>,document.getElementById('root'));

ReactDOM.render(element, container[, callback])

element를 제공된 container의 DOM에 렌더링

여기서는 App.js에서 가져온 App 컴포넌트를 Index.html의 id가 root인 요소에 렌더링


 

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 '컴포넌트 생성 과정' 입니다.

(해당 포스팅은 '2019-04-30' 최종 수정되었습니다.)

다시 찾아온 히니입니다 :>

이번에는 React를 설치하는 과정을 설명하겠습니다.

저는 이번에 '생활코딩 인강', '노마드코더 인강', 'React 공식사이트 문서', 'React.js를 이용한 모던 프런트엔드 구축 책'으로 공부 한 후 정리합니다.

미리 말씀드리지만, 윈도우 기준으로 설명합니다.

(나중에 맥 기준 설명 추가할 수 있으면 할게요!)

 


( 흐름을 보시려면 맨 아래쪽의 '정리' 먼저 보셔도 됩니다. )

React를 실행해볼 수 있는 환경에는

1. 온라인 컴파일러

2. 기존 html 파일에 script로 불러오기

3. toolchian 설치

가 있습니다.

React 공식 사이트에서 가장 추천하는 방법은 2번인데요.

아무래도 간단하고 기존 사이트에 적용하기 쉬워서인 것 같은데,

생활코딩과 노마드코더에서는 3번을 이용해서 react를 설치합니다.

3번 방법이 제대로 된 설치이기 때문이죠!

그래서 저도 3번 방법 기준으로 정리해봤는데,

1번은 사이트만 알려드리면 돼서 공식사이트에서 추천하는 사이트의 url만 가져왔습니다.

 

 


 

1번 방법

온라인 컴파일러

 

URL만 올리겠습니다.

설치없이 들어가셔서 코드 짜고 그냥 실행하시면 됩니다!

https://codepen.io/pen?&editable=true&editors=0010 (codepen*)

https://codesandbox.io/s/new(codesandbox)

https://glitch.com/edit/#!/light-chef?path=README.md:1:0(Glitch)

 

 


 

2번 방법

script로 불러오기

 

 

2번 방법이 궁금하신 분은 공식사이트를 참조하시길 바랍니다.

 

https://reactjs.org/docs/add-react-to-a-website.html

 

간단히 코드 올려드리자면

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- Don't use this in production:-->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head>

<body>
    <div id="root"></div>
    <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
    <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html -->
</body>

</html>

이러합니다.

 

 


 

 

3번 방법

Tool chain

 

Tool chain 이란 서로 관련 있는 개발 도구들의 집합입니다.

공식 사이트에서는 경우에 따라 여러가지 Tool chain을 추천합니다.

 

https://reactjs.org/docs/create-a-new-react-app.html#more-flexible-toolchains

 

 

저는 Create React App 이라는 Tool chain을 사용할겁니다.

이 또한 페이스북이 제공하는 툴입니다.

(페이스북 당신은 대체...)

Create React App은 하나의 명령으로 React 프로젝트를 시작할 수 있는 개발환경을 세팅해줍니다.

(내부적으로 Babel과 webpack을 사용한다고 되어있지만, 공식 사이트에서 이것들을 알 필요는 없다고 명시함)

Tool chain 중

'패키지 매니저' 인 Yarn, npm은 개발환경을 설치, 업데이트하기 쉽게 해줍니다.

'번들러' 인 webpack, parcel은 모듈러 코드를 작성하고 그것들을 작은 패키지로 묶어서 로딩시간을 줄여줍니다.

'컴파일러'인 babel 은 모던 자바스크립트가 오래된 브라우저에서도 작동하게 해줍니다.

 

 


 

 

과정

1. npm 설치

CreateReactApp을 깔려면 npm이 필요합니다.

[npm 링크]

 

1-1. node.js 설치

https://nodejs.org/ko/download/

위의 node.js 사이트에서 사용중인 운영체제에 맞춰 node.js를 설치합니다.

(node.js를 설치하면 npm도 함께 설치됩니다.)

 

1-2. 커맨더 결정

여기서, 앞으로 쓸 커맨더를 결정하세요!

윈도우에서는 cmd, 맥은 터미널, 공통으로 VSC(Visual Studio Code)을 추천합니다.

다른 커맨더도 많으니 각자에게 맞는 커맨더를 찾아서 준비하시길 바랍니다.

 

1-3. npm 버전 확인

커맨더에

npm -v

를 입력해 node.js가 깔려있는지, 버전은 무엇인지 확인해보세요.

2. create-react-app 설치하기

npm을 설치했다면 create-react-app을 설치할 차례입니다.

npm install -g create-react-app

이렇게 명령어를 입력하면 최신 버전이 설치됩니다.

 

 


 

버전을 선택해서 설치하고 싶으면

npm install -g create-react-app@2.1.8

이런식으로 명령어를 입력하면 됩니다.

여기서 -g 옵션은 어디서든지 create-react-app을 이용할 수 있게 해준다는 뜻입니다.

 

 

npx create-react-app my-app

npx로 설치하셔도 상관없습니다

npx는 npm을 설치하면 같이 설치되는데, 프로그램을 1회용으로 설치하는 특수 소프트웨어입니다.

npx로 설치하면 사용하고 지워버립니다.

실무적으로 할 때는 항상 최신버전을 사용할 수 있는 npx가 주로 사용됩니다

sudo npm create-react-app my-app

리눅스나 유닉스에서는 앞에 sudo만 붙이면 됩니다.

권한 오류 때문입니다.

 

 


 

3. 폴더 생성하기

설치 후에는 컴파일할 파일들을 담을 폴더를 생성해야합니다.

create-react-app practice_react // 'practice_react'이라는 react app폴더 만들기

create-react-app practice_react
// 'practice_react'이라는 react app폴더 만들기

 

4. 컴파일 시작

시작하려면

create-react-app 한 폴더로 이동 후 npm start 명령을 입력하면됩니다.

cd practice_react npm start

프로그램이 실행되면 localhost: 3000 페이지가 웹에 자동으로 띄워집니다.

 

 


npm이 아닌 yarn으로 실행시키려면

npm install -g yarn yarn start

yarn을 설치한 후 시작하면 됩니다.

yarn도 npm과 같은 패키지 매니저입니다.

yarn과 npm의 차이점 및 특성은 다음에 정리해보겠습니다!

[ yarn 링크 ]

[패키지 매니저 링크]

그 전까지 아래 사이트를 참조해주세요

https://happygrammer.tistory.com/154


 

* 반드시 create-react-app 적용한 그 폴더에서 패키지 매니저를 start 해야합니다.

 


저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 '리액트 구조, 소스파일 (프로세스)' 입니다.

+ Recent posts