React

1. 시작하기 

1. create-react-app

1) 리엑트 기본으로 시작하기

> npm install -g create-react-app
> create-react-app --version
4.0.2

2) 타입스크립트로 시작하기

create-react-app third-app --template typescript

* 프로젝트 이름에 대문자가 있으면 안된다. 

 

Cannot create a project named "firstApp" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.

* create-react-app first-app --scripts-version=react-scripts-ts 명령은 deprecated 되었다.

 

The react-scripts-ts package is deprecated. 
TypeScript is now supported natively in Create React App. 
You can use the --template typescript option instead when generating your app to include TypeScript support. 
Would you like to continue using react-scripts-ts?

* > create-react-app second-app --typescript 명령도 인터넷에 많던데.. 필자는 ts가 아닌 일반 react 앱이 만들어지더라... 머지..

 

> npm install -g yarn
> yarn -version
1.22.10

* yarn : Facebook에서 만든 자바스크립트 패키지 매니저

* create-react-app 명령어 실행 시간이 상당히 길다. yarn을 설치하면 조금 시간이 줄어드는 것 같다. 

* yarn 설치 후 위에 있는 create-react-app 명령어 실행하면 알아서 yarn 통해 설치하게 된다. 

> create-react-app third-app --template typescript     

Creating a new React app in D:\Dev\react-ts\third-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
...(중략)...

 

 

2. 실행

1) 개발 모드

- 용량이 큼

> create-react-app .
npm run start

또는

yarn start

2. 운영 모드

- 용량 최적화

 

방법1

npm install -g serve

방법2

npx serve -s build

- npx : 해당 모듈을 다운 받아서 한번만 실행

- build 폴더를 document root로 하겠다는 의미

 

3. 기본

import React, { Component } from 'react';
import './App.css';
import Subject from './components/Subject';
import Nav from './components/Nav';
import Content from './components/Content'

class App extends Component {

  constructor(props){
    super(props);  
    
    this.state = {
      
      mode:'read',
      subject:{title:'WEB', sub:'world wide web!'},
      welcome:{title:'Welcome', desc:'Hello React!!'},
      contents:[
        {id: 1, title:'HTML', desc:'HTML is for ...'},
        {id: 2, title:'CSS', desc:'CSS is for ...'},
        {id: 3, title:'JS', desc:'JS is for ...'}
      ]
    }
  }

  render(){

    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
      
    }else if(this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }

    console.log('App render()')
    return (
      <div className="App">
        {/* <Subject title = {this.state.subject.title} sub={this.state.subject.sub}/> */}

        <header>
            <h1><a href='/' onClick={function(e){ 
              console.log(e)
              // debugger;
              e.preventDefault();
              //this.state.mode = 'welcome';
              this.setState({mode:'welcome'})

              }.bind(this)}> {this.state.subject.title}</a></h1>
            {this.state.subject.sub}
        </header>
        <Nav data={this.state.contents}/>
        <Content title={_title} desc= {_desc}/>
      </div>
    );
  }
}

export default App;

 

3. 주요 메모

1. state의 값이 바뀌면 rander() 함수가 자동 호출된다.

2. bind()

<a
	href='/' 
	onClick={function(e){ 		// e를 통해 이벤트 정보를 가져올 수 있다.
              console.log(e);
              debugger;			// 자바스크립트 실행 중 해당 라인에 자동으로 디버깅이 걸린다. (브레이크 포인트와 비슷)
              e.preventDefault();	// 이밴트가 있는 테그의 이벤트를 차단할 때 사용
              //this.state.mode = 'welcome';	// constructor()와에서 state 값을 바꾸려면 setState() 사용해야한다.
              this.setState({mode:'welcome'})	// bind() 하지 않으면 함수 안에서 this는 undefined 이다.
	}.bind(this)}	// function 내에서 this 키워드 사용 가능하도록 bind 한다.
</a>

람다식에서 사용 하는 방법?

<a 	href='/' 
	onClick={(e)=>{ 
    	         
	}.bind(this)}	// 람다식에서 이렇게 작서하면 오류 발생?
</a>

bind 해아 함수 내에서 사용 가능

var obj = { name : 'hi'};
function bindTest(){
	console.log(this.name);		// undefined
}

var bindTest2 = bindTest.bind(obj);
bindTest2()
> hi

 

4. 기타

 

Tip. 브라우저 변경 (컴퓨터의 기본 브라우저가 실행됨)

(windows 10 기준) 제어판 > 프로그램 > 기본 프로그램 > 기본 프로그램설정 > 기본 앱 > 웹 브라우저.  Chrome으로 변경

 

 

Tip. 터미널에서 현재 폴더를 프로젝트 폴더로 지정해서 VS code로 바로 열기

> code .

 

 

 

 

3. 환경설정