티스토리 뷰
2019.08.01(목) React
React 특징, 환경설정, JSX 문법
1. MVM(Model-View-Whatever) 아키텍처
- Whatever은 '?' 라는 의미로 아무거나 들어 갈 수 있다는 의미다.
2. View
- React는 MAC에서 View에 특화되어 있다.
- React는 뷰만 담당한다.
3. DOM(Document Object Model)
- 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.
- 트리 형태라서 특정 node를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 할 수 있다.
4. Virtual DOM
- 쉽게 말해 DOM을 copy 한 것이다.
- 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 JS 객체를 구성하여 사용한다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다
- 바뀐 부분만 실제 DOM에 적용한다.
5. 컴포넌트(Component)
- 클래스 개념과 거의 동일하다.(90% 동일)
- 결국 객체가 만들어 져야 한다는 의미이다.
- 클래스와 구성 요소가 다르다.
- 최소한의 기능을 하는 모듈화된 라이브러리이다.
- 컴포넌트들의 조합으로 View가 된다.
6. 알아두어야 할 것들
- npm, yum : 필요한 라이브러리 설치하는 명령어(yum을 많이 사용한다.)
- yum을 많이 사용하기는 하지만 둘 다 사용하고 있기 때문에 사용법 정도는 알고 있어야 한다.
- React로 프로젝트를 생성하지만 프로젝트에서 실제로 우리가 사용하는 코드는 App.js(Main 역할)와 index.js 두 가지 위주로 코드를 작성한다.
- 코드를 실행하면서 웹 브라우져를 같이 켜서 확인하면서 프로그램을 작성하는 것이 좋다. Auto Save를 통해 실시간으로 저장하면서 반응하도록 하면 된다.
- 파일명을 변경하고 싶다면 파일명.js에서 변경하고 index.js에서도 변경을 해주어야 오류가 발생하지 않는다.
- 메인을 제외한 파일은 모두 소문자로 파일명을 정하는게 관례이다.
- 파일을 나누어 주고자 한다면 App.js에서 import를 통해 경로 지정을 해 주면 된다.
7. 환경설정
- React 뿐만 아니라 웹 개발 할 때 가장 시간이 많이 소요되는 것이 환경설정이다.
- React는 라이브러리를 받아 실행하도록 한다. 그리고 코딩은 vsCode로 한다.
- nodejs 설치
- vsCode 설치
- react-app 설치 (cmd에서 설치 진행)
- npm install -g create-react-app (create-react-app 설치)
- create-react-app --version (create-react-app 버전확인 및 설치 확인)
- create-react-app test01 (프로젝트 생성) - 'test01' 내가 설정한 프로젝트명
- cd test01 (생성한 프로젝트 폴더로 이동)
- npm start (프로젝트 실행)
- ----------------------------------------------------------------------------------
- create-react-app test02 && cd test02 && npm start (프로젝트 생성부터 실행까지 한번에 처리)
- npm을 이용해서 필요한 라이브러리를 끌어 올 수 있다.
- 터미널에서 npm install '내가가지고오고싶은라이브러리이름' --save
* 알아두기
저자 소스코드에는 node_modules가 다 빠져 있기 때문에 실행이 불가능하다.
실행을 하기 위해서는 터미널에서 npm install 하면 node_modules가 생성된다
그 후에 npm start를 통해 프로젝트를 실행하면 된다.
8. React의 전반적인 구조 / 코드 작성법
import React, { Component } from 'react';
class App extends Component {
// 함수 영역(render() 위에 함수를 작성)
render() {
// 자바 스크립트 code영역(render()과 return 사이에 작성)
return (
// JSX 문법 영역(JSX 문법은 return () 안에 작성한다.)
// 웹 페이지 작성하듯이 작성하면 된다.
// return () 안에 웹에서의 body라고 생각하면 된다.
// HTML + JS 문법을 적절히 사용 할 수 있다.
// 반드시 <div> </div> 태그가 한 개 존재해야 한다. 없으면 안된다.
<div>
</div>
);
}
}
export default App;9. 실습
- Ex01
import React, { Component, Fragment } from 'react'; // Fragment를 추가 해주어야 사용 가능
class App extends Component {
render() {
return (
/*div 대신 Fragment로 대체해서 사용 가능, 코드가 나오지 않는다는것 빼고는 기능 동일
언제 사용? compnent1 안에서 componet2를 가져온다. 1에도 div있고 2에도 div가 있기 때문에 계속 겹치기 때문에 코드가 난잡
그래서 코드를 출력하지 않는 Fragment를 사용하는 것이다.
*/
<div>
<h1>댕댕이</h1>
</div>
/*
<Fragment>
<h1>독수리</h1>
</Fragment> */
// 알아두기
// 위에 없이 h1만 쓰면 h1이 메인태그가 된다. 두개 쓰면 에러
// 항상 div 메인태그가 존재해야 한다. 실수많이 하는 에러 중 하나
// <h1></h1>
);
}
}
export default App;
- div를 사용하게 되면 기존에 존재하는 root div 밑에 또 div가 들어가게 된다. div를 계속 사용해서 만들다보면 div가 계속 겹쳐 코드가 난잡해지기 때문에 아래와 같이 Fragement를 사용하는 것이 좋다.
- Ex02
import React, { Component } from 'react';
class App extends Component {
render() {
const s = '문자열';
const b = true;
return (
// 위의 자바 스크립트 변수 활용
// 위의 변수를 사용할 때는 { }안에 변수명을 작성해 주어야 한다.
// 위 코드는 { } 스코프를 사용한다.
// JSX 문법에서 제어문 사용불가! 그러나 오직 삼항 연산 사용 가능
<div>
<h1>{s}</h1>
{ b ? '호랑이' : '코끼리' }
<h5>{ b ? '냥냥이' : '댕댕이' }</h5>
</div>
);
}
}
export default App;
- Ex03
App class 안에 직접 style 선언해서 사용
import React, { Component } from 'react';
class App extends Component {
render() {
const s = '문자열';
const b = true;
// 이걸 css에 넣을 수 있다.
const style = {
backgroundColor: 'gray',
border: '1px solid black',
height: Math.round(Math.random() * 300) + 50,
width: Math.round(Math.random() * 300) + 50,
WebkitTransition: 'all',
MozTransition: 'all',
msTransition: 'all'
};
return (
// 리액트는 html과 다르게 style를 직접 정의 불가, 자바 객체를 넘겨서 style을 초기화해야 한다.
// 객체는 { } 안에 사용
// 1. js 선언 부분에 선언을 했을 때 아래와 같이 사용
<div style={style}></div>
);
}
}
export default App;App.css 에 작성하여 불러서 사용하는 방법
// App.js
import React, { Component } from 'react';
class App extends Component {
render() {
const s = '문자열';
const b = true;
// 이걸 css에 넣을 수 있다.
/* const style = {
backgroundColor: 'gray',
border: '1px solid black',
height: Math.round(Math.random() * 300) + 50,
width: Math.round(Math.random() * 300) + 50,
WebkitTransition: 'all',
MozTransition: 'all',
msTransition: 'all'
}; */
return (
// 2. js에 선언하지 않고 css에 st를 넣어서 불러서 사용하는 방법
<div className="st"></div>
);
}
}
export default App;// App.css
// App.css 파일 마지막에 추가
// js의 style와 문법이 다르므로 수정해서 넣어야 한다.
.st {
background-color: gray;
border: 10px solid black;
height: 300px;
width : 300px;
WebkitTransition: 'all';
MozTransition: 'all';
msTransition: 'all'
}실행 결과는 둘 다 동일하다.
- Ex04
import React, { Component } from 'react';
class App extends Component {
//여기서 함수 생성 가능
// 함수 생성 방법1
f1() { // function f1()는 error
console.log('f1()');
}
// 함수 생성 방법2
f2 = function() {
console.log('f2()');
}
// 함수 생성 방법3
f3 = () => {
console.log('f3()');
}
// render() : 그린다(draw)는 의미
render() { // render()은 함수다 그러면 우리도 함수 만들 수 있다.
return (
<div>
{/* 함수를 콜하지 말고 불러야 이벤트가 발생한다. */}
{/* 그리고 함수에 접근 할 때는 this를 사용해야 한다. 안하면 error */}
<button onClick={this.f1}>버튼1</button>
<button onClick={this.f2}>버튼2</button>
<button onClick={this.f3}>버튼3</button>
</div>
);
}
}
export default App;
- Ex05
class를 나누지 않고 App.js에 모든 클래스(컴포넌트) 선언하여 사용
import React, { Component} from 'react';
class App extends Component {
render() {
return (
<div>
<h2>호랭이App</h2>
{/* 아래처럼 단독 태그를 사용하면 Bpp의 출력 내용이 출력된다. */}
<Bpp></Bpp>
</div>
);
}
}
// Bpp라는 새로운 컴포넌트가 생겼다.
// 컴포넌트는 단독 태그 처럼 사용 할 수 있다. 그냥 태그를 하나 만들었다고 생각하면 된다.
// 서로 태그를 사용하면 무한루프에 빠진다.
class Bpp extends Component {
render() {
return (
<div>
<h2>댕댕이Bpp</h2>
<Cpp></Cpp>
</div>
);
}
}
class Cpp extends Component {
render() {
return (
<div>
<h2>낭낭이Cpp</h2>
</div>
);
}
}
// 하나의 파일 안에서는 하나의 디폴트만 존재한다.
// 그리고 반드시 하나의 디폴트는 존재해야 한다.
// 즉, 한개 이상도 안되고 없어서도 안된다.
export default App;class를 나누어 사용(App, Bpp, Cpp 모두 분할)
// App.js
import React, { Component} from 'react';
// 분리된 클래스 경로 설정(. -> 현재 경로를 말한다.)
import Bpp from './apple/bpp.js'
class App extends Component {
render() {
return (
<div>
<h2>호랭이App</h2>
{/* 아래처럼 단독 태그를 사용하면 Bpp의 출력 내용이 출력된다. */}
<Bpp></Bpp>
</div>
);
}
}
// 하나의 파일 안에서는 하나의 디폴트만 존재한다.
// 그리고 반드시 하나의 디폴트는 존재해야 한다.
// 즉, 한개 이상도 안되고 없어서도 안된다.
export default App;// bpp.js
import React, { Component } from 'react';
import Cpp from './cpp.js'
class Bpp extends Component {
render() {
return (
<div>
<h2>댕댕이Bpp</h2>
<Cpp></Cpp>
</div>
);
}
}
export default Bpp;// cpp.js
import React, { Component } from 'react';
class Cpp extends Component {
render() {
return (
<div>
<h2>낭낭이Cpp</h2>
</div>
);
}
}
export default Cpp;실행 결과는 둘 다 동일하다.
- Ex06
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h2>호랭이</h2>
{/* age1은 문자열 취급을 받는데 숫자를 취급받고 싶으면 {}로 감싸서 넘기면 된다. */}
<Dpp name='냐오옹' age1='18' age2={18}>
{/* name을 통해서 일단 줬다. */}
</Dpp>
</div>
);
}
}
class Dpp extends Component {
render() {
return (
<div>
{/* { }는 자바 문법을, 객체를 쓰겠다. this 사용 */}
{/* props는 매우 중요한 객체이다. 잘 봐두라. */}
{/* {} 안에서 자바 문법 사용 가능 하므로 typeof로 감싸면 type을 확인 할 수 있다. */}
{/* 여기서 핵심은 App가 Dpp를 호출하는데 App에서 Dpp로 값을 넘길때 Dpp가 받기 위해서는 props 사용해야 된다. */}
<h4>{this.props.name}</h4>
<h4>{this.props.age1}</h4>
<h4>{typeof(this.props.age1)}</h4>
<h4>{this.props.age2}</h4>
<h4>{typeof(this.props.age2)}</h4>
<h2>파파파</h2>
</div>
);
}
}
export default App;
'React' 카테고리의 다른 글
| [REACT] React - .css .scss 사용 (0) | 2019.08.13 |
|---|---|
| [REACT] React - map()복습, JS문법 concat/slice/pop/전개연산/비구조화 할당 사용 (0) | 2019.08.08 |
| [REACT] React - event, state, tag, map(), lifecycle, 함수형 컴포넌트 (0) | 2019.08.07 |
| [REACT] React - 복습 (0) | 2019.08.06 |
| [REACT] React - props, state, import (0) | 2019.08.02 |