(해당 포스팅은 '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인 요소에 렌더링


 

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

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

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

+ Recent posts