React

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

1. Node.js

2. npm 설치

노드 패키지 매니저(npm)

npm -v

Zeplin 설치

ZeplinZeplin

3. React Developer Tools

ESLINT

4. git 설치

https://git-scm.com/download/macgit-scm.com

5. 리액트 앱 만들기

명령 프롬프트를 이용하여 현재 만들고 싶은 폴더로 이동합니다.

npx create-react-app "name"

6. 기본 셋팅하기

//App.js
import React from 'react';

function App(){
  return <h1>Hello</h1>
}

export default App;

//index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

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

//index.html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create react Portfolio"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React Portfolio</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

7. 컴퍼넌트 생성

외부 컴퍼넌트 생성

//Web.js
import React from 'react';

function Web(){
    <h2> 웹 컴퍼넌트 생성 </h2>
}

export default Web;

//App.js
import React from 'react';
import Web from './web';

function App(){
  return (
    <div>
      <h1>React Start</h1>
      <Web />
    </div>
  )
}

export default App;

내부 컴퍼넌트 생성

//App.js
import React from 'react';

function Web(){
  return <h2>웹 내부 컴퍼넌트 생성</h2>
}

function App(){
  return (
    <div>
      <h1>React Start</h1>
      <Web />
    </div>
  )
}

export default App;

8. props 개념 익히기

function Web({name, info}){
return (
  <div>
    <h2>웹 내부 컴퍼넌트 생성 {name} {info} </h2>
  </div>
)
}

function App(){
  return (
    <div>
      <h1>React Start</h1>
      <Web />
      <Web name="site" info="webs" view={true} abc={[1,2,3,4]} />
    </div>
  )
}

9. 라우터 만들기

리액트는 싱글 페이지로 구성되어 있기 때문에 가상의 주소를 만들어 주어야 합니다. 라우터를 이용하여 URL을 통해 특정 컴퍼넌트를 불러와서 사이트를 구성할 것 입니다. 우선 react-router-dom 패키지를 설치합니다.

npm install react-router-dom

라우터생성

import React from 'react';
import { HashRouter } from 'react-router-dom';

function App(){
  return (
    <HashRouter>
      
    </HashRouter>
  )
}

export default App;

exact={true} --> 해당되는 곳 에서만

//App.js
import React from 'react';
import Main from './routes/Main'
import About from './routes/About'
import Reference from './routes/Reference'
import Script from './routes/Script'
import Site from './routes/Site'
import Contact from './routes/Contact'
import { HashRouter, Route } from 'react-router-dom';

function App(){
  return (
    <HashRouter>
      <Route path="/" exact={true} component={Main} ></Route>
      <Route path="/about" component={About} ></Route>
      <Route path="/reference" component={Reference} ></Route>
      <Route path="/script" component={Script} ></Route>
      <Route path="/site" component={Site} ></Route>
      <Route path="/contact" component={Contact} ></Route>
    </HashRouter>
  )
}

export default App;

10. scss 설치하기 / 삭제하기

설치하기

npm install node-sass

삭제하고 4.대 버전 설치

npm uninstall node-sass
npm install node-sass@4.14.1

11. header 코딩

//Header.js
import React from 'react';
import { Link } from 'react-router-dom'; //Link 태그 사용법
import './Header.scss';

function Header(){
    return (
        <header id="header">
            <div className="port"><Link>port</Link></div>
            <div className="logo"><Link to="/">1rrock</Link></div>
            <nav className="nav">
                <ul>
                    <li><Link to="/about">about</Link></li>
                    <li><Link to="/reference">reference</Link></li>
                    <li><Link to="/script">script</Link></li>
                    <li><Link to="/animation">animation</Link></li>
                    <li><Link to="/site">site</Link></li>
                    <li><Link to="/contact">contact</Link></li>
                </ul>
            </nav>
        </header>
    )
}

export default Header;

12. scss사용

style.scss

style.scss에 fonts, mixins, base, variables 등 scss파일을 import

//style
@charset "UTF-8";

// base
@import "base";
@import "variables";
@import "mixins";
@import "fonts";

// layout
@import "header";

header.js에서 style.scss만 불러옴

import '../scss/style.scss';

13. class사용

class Site extends React.Component {
    //생성자 함수 : 컴포넌트가 처음 만들어 질때 실행
    constructor(props){
        super(props);
        console.log("constructor()");
    }


    state = {
        count : 0,
    }

    add = () => {
        // console.log("Add");
        // this.state.count = 1;
        // this.setState({ count : 1 });
        // this.setState({ count : this.state.count + 1 });
        this.setState( current  => ({
            count: current.count + 1
        }));
    }

    minus = () => {
        // console.log("Minus");
        // this.state.count = -1;
        // this.setState({ count : -1 });
        // this.setState({ count : this.state.count - 1 });
        this.setState( current  => ({
            count: current.count - 1
        }));
    }

    // 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후에 실행
    componentDidMount(){
        console.log("componentDidMount");
    }

    // 화면이 업데이트 되면 실행
    componentDidUpdate(){
        console.log("componentDidUpdate");
    }

    // 컴포넌트가 끝날 때 실행
    componentWillUnmount(){
        console.log("componentWillUnmount");
    }

    render() {
        console.log("render()");
        return (
            <div>
                <h1>Site {this.state.count} </h1>
                <button onClick={this.add}>add</button>
                <button onClick={this.minus}>minus</button>
            </div>
        )
    }
}

async, await은 함수에서만 사용가

import React from 'react';
import axios from 'axios';

class Port extends React.Component {
    state = {
        isLoading : true,
        sites : []
    }

    getSites = async () => {
        const {
            data: {
                data: { ports }
            }
        } = await axios.get("https://webstoryboy.github.io/dothome1/portfolio.json");
        // console.log(sites.data.data.ports;
        this.setState( { ports, isLoading: false});
    }

    componentDidMount(){
        setTimeout( () => {
            this.getSites();
        }, 3000);
    }

    render(){
        const { isLoading } = this.state;
        return (
            <div>
                { isLoading ? "로딩중입니다....." : "준비됐습니다."}
            </div>
        )
    }
}

export default Port;

Nextvue

Last updated 5 years ago

hashtag1. Node.js

hashtag2. npm 설치

hashtagZeplin 설치

hashtag3. React Developer Tools

hashtag4. git 설치

hashtag5. 리액트 앱 만들기

hashtag6. 기본 셋팅하기

hashtag7. 컴퍼넌트 생성

hashtag외부 컴퍼넌트 생성

hashtag내부 컴퍼넌트 생성

hashtag8. props 개념 익히기

hashtag9. 라우터 만들기

hashtag라우터생성

hashtag10. scss 설치하기 / 삭제하기

hashtag11. header 코딩

hashtag12. scss사용

hashtagstyle.scss

hashtag13. class사용

1. Node.js

2. npm 설치

Zeplin 설치

3. React Developer Tools

4. git 설치

5. 리액트 앱 만들기

6. 기본 셋팅하기

7. 컴퍼넌트 생성

외부 컴퍼넌트 생성

내부 컴퍼넌트 생성

8. props 개념 익히기

9. 라우터 만들기

라우터생성

10. scss 설치하기 / 삭제하기

11. header 코딩

12. scss사용

style.scss

13. class사용