[React] 설치 및 기본

1. Node.js 설치

2. 편집에디터 : atom, vs code 등 많이 있지만 거의 vs code로 쓴다. 우리도 vs code로 작업한다.

   node.js를 깔면 npm이 자동으로 깔린다.

   npm은 설치 명령어이다.

3. react를 설치 

 

npm install -g create-react-app

리액터 라이브러리 설치 명령어

 

프로젝트 폴더에 들어가서

경로 앞에 cmd를 쳐주면 바로 들어간다.

경로로 들어가서 create-react-app test01 명령어를 쳐주면 설치에 들어간다.

Happy hacking이라고 뜨면 프로젝트는 만들어진 거다.

 

cd test01로 test01 프로젝트에 들어간 다음에

npm start 로 npm을 실행시켜준다.

해당 페이지가 열리면 성공한 것이다.

 

http://localhost:3000/

 

create-react-app test02 && cd test02 && npm start

를 하면 일괄 작업된다.

&&은 연속된 작업을 할 때 쓴다.

 

set pn=test03

create-react-app %pn% && cd %pn% && npm start

test03을 pn으로 정의해서 %%사이에 정의할 수 있다.

위에까지는 cmd 창에서 뜨는 것이다.

 

vs code terminal에서 작업 시

create-react-app test04에서 보안 오류가 뜨는 경우가 있는데 그때의 해결방법이다.

보안 오류: (:) [], PSSecurityException

powershell을 열어준다.

get-executionpolicy 를 쳐줘서 확인할 것이다.

Restricted 라고 뜨면 보안 때문에 안된다는 것을 의미한다.

 

set-executionpolicy RemoteSigned 를 친다음에 Y를 눌러주면 오류가 날것이다.

이때는 관리자 권한으로 실행하면 된다.

다시 get-executionpolicy으로 확인해주면

RemoteSigned라고 풀리게 된다.

그리고 다시 vs code에서 실행시켜주면 작업이 된다.

 

프로젝트를 만들어주는 것을 CLI라고 한다.

여기까지 작업한 것은 환경설정과 react 준비과정이다.

---

test01 프로젝트에 들어가서 src의 index.js는 메인 페이지이다.

하지만 우리가 관심을 가져야 할 것은 app.js이다.

 

app.js에서 <div>와 </div>사이의 내용을 지워주면 브라우저의 내용이 모두 사라진다.

<div>사이에 호랑이라 입력해주면 호랑이가 출력된다.

 

rcc라는 단축키를 사용하면 기본 코드를 만들어준다.

이런 기본코드를 만들려면 라이브러리에서 설치해야 할 파일이 필요하다.

마켓에서 reactjs를 치면 reactjs code snippets를 설치해준다.

charalampos karypidis 이 사람이 만든 것을 쓰면 된다.

설치가 완료되면 app.js의 내용을 모두 지우고 rcc라고 치고 enter를 쳐주면 생성된다.

2020.04.27 - [설치 및 서버세팅] - [Javascript] Node.js 설치와 VScode 설치하기

여기서 VScode 사용하면서 필요한 것들을 설치하고 진행하면 좋다

 

react 사이트 참조

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

---

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>호랑이</h1>
        <h1>활앙이</h1>
      </div>
    );
  }
}

export default App;

import는 끌어온다는 것이다.

Component를 참조하는 클래스이다.

return() 사이에서 작업을 하면 된다.

return에서 작업을 할 때는 반드시 <div> </div>사이에서 작업을 해야 한다.

안 그럴 시 오류가 생긴다.

 

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <h1>호랑이</h1>
        <h1>코끼리</h1>
      </Fragment>

    );
  }
}

export default App;

<div> 대신에 <Fragment>를 사용할 수 있다.

<Fragment>를 사용하려면 import React의 Component옆에 Fragment를 추가해줘야 한다.

<div>로 만들어준다면 개발자 도구 툴을 사용해서 보게 되면 아래와 같이 생기게 된다.

Fragment로 만들게 되면 는 소스 컴파일식으로는 코드가 사라진다.

똑같이 개발자 도구 툴로 보게 된다면 없어져 있는 것을 확인할 수 있다.

 

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    //javascript영역
    //주석1
    /*
    주석2
    */

    return (
      //JSX 영역
      <div>
        <h1></h1>
      </div>
    );
  }
}

export default App;

return안에 자바스크립트 문법을 사용하면 오류가 뜬다.

 

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    //javascript영역
    let a = 10;
    let b = 20;
    let s = true;
    console.log(a, b, s);
    

    return (
      //JSX 영역
      //제어식(if else)는 쓰지못하지만 삼항연산은 쓸수있다.(스코프를 사용)
      //{}사이에 작업하는 것을 표현식이라고 한다.
      <div>
        {true ? <h1>호랑이</h1> : <h1>코끼리</h1>}
        {s ? <h1>호랑이</h1> : <h1>코끼리</h1>}
        <h1>{s ? '호랑이' : "코끼리" }</h1>
      </div>
    );
  }
}

export default App;

제어식(if else)는 쓰지 못하지만 삼항 연산은 쓸 수 있다.(스코프를 사용)
{} 사이에 작업하는 것을 표현식이라고 한다.

 

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    //s = 호랑이 h1태그로 출력
    let s = '호랑이';
    
    return (
      <div>
        <h1>{s}</h1>
      </div>
    );
  }
}

export default App;

 표현식을 사용해서 호랑이 출력하기

 

 

css 끌어오는 방법 (스타일링하는 법)

App.css 에 해당 목록을 추가해준다.

.my-css {
  background-color: red;
}

 

import React, { Component } from 'react';

import './App.css';			//추가

class App extends Component {
  render() {
    

    return (
      <div className="my-css">
        <h1>빨간 호랑이</h1>
      </div>
    );
  }
}

export default App;

className을 사용해서 css를 가져온다.

 

<br>과 같은 단톡 태그를 사용할 때는 <br/>처럼 뒤에 /로 닫아줘야지 오류가 나지 않는다.

스스로 닫는 것을 self closeing이라고 한다.

 

Component는 레고처럼 조각조각처럼 가져와서 쓸 수 있게 하는 것을 의미한다.

컴포넌트 생성 단축키는 rcjc이다.

import React, { Component } from 'react';

import './App.css';			//추가

class App extends Component {
  render() {
    
    return (
      <div className="my-css" >
        <h1>빨간 호랑이</h1>
        <Com1/>
      </div>
    );
  }
}

class Com1 extends Component {
  render() {
    return (
      <div>
        <h1>토깽이</h1>
      </div>
    );
  }
}


export default App;

<div>로 생성했기 때문에 div안에 div가 들어가는 형식으로 나온다.

 

 

 

파일명은 반드시 소문자여야 한다.(class명은 첫 자가 대문자이다.)

import는 Component의 이름이고 from 'react'는 react파일에서 가져왔다는 것이다.

 

apple.js 파일을 만들어준다. 파일명은 소문자로 작성한다.

//apple.js
import React, { Component } from 'react';

class Apple extends Component {
//class명은 대문자이므로 Apple로 수정한다. 그리고 밑에 export 부분도 대문자로 수정

    render() {
        return (
            <div>
                <h1>호랑이</h1>
            </div>
        );
    }
}

export default Apple;

App.js로 이동해서 apple을 import를 시켜줄 것이다.

import명은 대문자이고 파일명은 소문자이고 from에는 경로를 써줘야 한다.

import React, { Component } from 'react';
import Apple from './apple';
//파일명은 소문자이기 때문에 apple이다. import는 component이름이므로 Apple이다.

class App extends Component {
  render() {
    return (
      <div>
        <Apple/>
      </div>
      //Apple은 import명이기 때문에 대문자 Apple을 써준다.
    );
  }
}

export default App;

 

메뉴에 file에서 auto save를 눌러서 자동 저장을 선택해줍니다.

 

//banana.js
import React, { Component, Fragment } from 'react';

export default class Banana extends Component {
    render() {
        return (
            <Fragment>
                <h1>바나나</h1>
            </Fragment>
        );
    }
}

export  class GreenBanana extends Component {
    render() {
        return (
            <Fragment>
                <h1>안익은 바나나</h1>
            </Fragment>
        );
    }
}

export  class BrownBanana extends Component {
    render() {
        return (
            <Fragment>
                상한 바나나
            </Fragment>
        );
    }
}

 

//App.js
import React, { Component } from 'react';
import Banana, { GreenBanana, BrownBanana} from './banana';

class App extends Component {
  render() {
    return (
      <div>
        <Banana/>
        <GreenBanana/>
        <h1><BrownBanana/></h1>
      </div>
    );
  }
}

export default App;

 

버튼을 사용하는 방법

//App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      //onClick안에서는 항상 함수를 사용해야한다.
      <div>
        <button onClick={()=>{console.log('log')}}>1</button>
      </div>
    );
  }
}

export default App;

 

 

 

//orange.js
export function f2() {
    console.log('f2');
    
}

export function f3() {
    console.log('f3');
    
}

 

//kiwi.js
import React, { Component } from 'react';

export function f4(){
    console.log('f4');
}

export default class Kiwi extends Component {
    render() {
        return (
            <div>
                키위
            </div>
        );
    }
}

export class GoldenKiwi extends Component {
    render() {
        return (
            <div>
                골든키위
            </div>
        );
    }
}

 

//App.js
import React, { Component } from 'react';
import * as Orange from './orange';
//orange 파일에서 무언가를 가져와서 첫자가 대문자인 Orange로 쓰겠다는 말이다.

import Kiwi, { GoldenKiwi } from './kiwi';
import * as Mykiwi from './kiwi';
//kiwi파일에서 컴포넌트와 함수를 가져온다.

function f1(){
  console.log('버튼2클릭');
}

class App extends Component {
  render() {
    return (
      //onClick안에서는 항상 함수를 사용해야한다.
      <div>
        <button onClick={()=>{console.log('버튼1')}}>버튼1</button><br/>
        <button onClick={f1}>버튼2</button><br/>
        <button onClick={Orange.f2}>버튼3</button><br/>
        <Kiwi/>
        <GoldenKiwi/>
        <button onClick={Mykiwi.f4}>버튼4</button>
      </div>
    );
  }
}

export default App;

 

 

파일 내부, 외부, 상속으로 불러오는 법을 연습해보자

//App.js
import React, { Component } from 'react';
import Bpp from './bpp';
import Dpp from './sub1/dpp';

class App extends Component {
  render() {
    return (
      //onClick안에서는 항상 함수를 사용해야한다.
      <div>
        <Bpp/>
        <Dpp/>
      </div>
    );
  }
}

export default App;

 

//bpp.js
import React, { Component } from 'react';
import Cpp from './cpp';

export default class Bpp extends Component {
    render() {
        return (
            <div>
                <h2>이건 다른 페이지</h2>
                <Cpp/>
            </div>
        );
    }
}

 

//cpp.js
import React, { Component } from 'react';

export default class Cpp extends Component {
    render() {
        return (
            <div>
                <h1>페이지 여러개</h1>
            </div>
        );
    }
}

 

// sub1/dpp.js
import React, { Component } from 'react';
import Epp from './epp';

export default class Dpp extends Component {
    render() {
        return (
            <div>
                아기 호랑이
                <Epp/>
            </div>
        );
    }
}

 

// sub1/epp.js
import React, { Component } from 'react';
import Fpp from '../sub2/fpp';

export default class Epp extends Component {
    render() {
        return (
            <div>
                <Fpp/>
                <button onClick={()=>{console.log('버튼이닷')}}>버튼도있어요</button>
            </div>
        );
    }
}

 

// sub2/fpp.js
import React, { Component } from 'react';

class Fpp extends Component {
    render() {
        return (
            <div>
                <h3>이건 외부파일</h3>
            </div>
        );
    }
}

export default Fpp;

버튼 같은 log를 확인할 때는 chorm에서 개발자 도구 툴(F12)을 사용해서 확인해야 한다.