본문 바로가기
Programming/국비학원

220729 - React - 환경 구축

지고르 2022. 7. 30. 12:31
리액트

서브페이지 X 싱글페이지 O (SPA)
프로젝트 단위로 프로그램 구축

 

※ component
사용자 정의 태그 (이름, 속성 모두 개발자가 명명)
리액트의 최소 단위 
클래스와 함수로 나뉨

 

 

※프레임워크, 라이브러리 차이

https://canoe726.tistory.com/23

 

React 는 왜 프레임워크가 아니라 라이브러리일까?

React에 관한 글을 작성하다가 React는 왜 라이브러리일까? 그리고 프레임워크와 라이브러리의 차이점은 무엇일까? 에 대한 해답을 얻기위해 포스팅을 작성하게 되었습니다. 1. React 는 프레임워크

canoe726.tistory.com

 

 

※리액트, 리액트 네이티브

https://zeddios.tistory.com/409

 

리액트? 리액트 네이티브??

안녕하세요 :) Zedd입니다. 웹을 하시는 분들이라면 "리액트"라는 단어는 무조건 들어보셨을 것 같은데.. 저는 잘 몰라서 정리를 하려고 합니다. 정리하는 김에 리액트 네이티브까지 ㅇㅇ ● 리액

zeddios.tistory.com

 

 

※ NPM (Node Package Manager) : 리액트 등 앱들을 적절한 환경에 설치 지원 
=> NPM 있어야 리액트 설치 가능

 


※Node js
javascript로 서버 구축, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)

 

https://ninjaggobugi.tistory.com/7

 

[NODE 강의] Node.js 란?

[클립명] 1. 자바스크립트란? 2. nodejs란? 3. nodejs설치  Node.js 라는 것을 들어본지는 벌써 몇 년 전이다. 하지만 Node.js에 대해 공부해본 적이 없었기 때문에 막연하게나마 '자바스크립트로 데이터베

ninjaggobugi.tistory.com

 


※앱 
1 웹앱 : 브라우저 통해 구현되는 앱 ex.웹페이지
2 네이티브앱: 폰에 설치해서 구동되는 앱 ex.일반 스마트폰 앱
3 하이브리드앱: html,css,js로 제작, 설치 및 구현은 앱처럼 ex.11번가 등 쇼핑몰앱

 

 

 

  • 리액트 설치

1. nodejs.org

최신X 안정적 버전O 다운로드

 

2. cmd

npm -v  
npm install -g create-react-app (g: global, 어디서나 실행)

 

 

 

  • 개발 환경 구축

1. cmd

cd 리액트설치할폴더명

create-react-app . => 현재 폴더에 리액트 개발환경 구축

 

2. 비주얼 스튜디오

보기 - 터미널 표시

터미널 - npm run start => 서버 오픈

터미널 - ctrl + c 입력 후 y 입력 => 서버 종료

 

3. 크롬 웹스토어

react developer tools 설치

-> 컴포넌트 확인 가능

 

 

 

  • 리액트 이용해 간단한 웹페이지 구현

App.js => export
index.js => App import, index.html의 root  요소와 연결

 

연결/구현 이해 참고:

https://mjn5027.tistory.com/21

 

[ React ] 리액트 화면 띄워보기

이번 게시글에선 리액트를 사용해 화면을 띄워보는 내용을 다룰 것이다. ​ 저번 게시글에서 만든 hello-react 프로젝트를 코드에디터 프로그램으로 열어보자. 필자는 VisualCode 사용. ​ ​ 다음과

mjn5027.tistory.com

 

 

  • App.js

import { Component } from 'react';
import './App.css';

class App extends Component{
  render(){ //render: export 도움
    return (
      <div> //가장 외곽은 wrapper 역할하는 태그 하나로 감싸져 있어야 함 (여러 태그 각자 존재 불가)
        <h1>리엑트 홈페이지</h1>  
        <p>"안녕하세요!"</p>
      </div>
      );
  }
}

export default App;

 

 

  • index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; //이름 변경 가능(App)
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root')); //index.html의 #root 영역을 찾아 변수에 전달
root.render(   //root에 컴포넌트 보여줌
  <React.StrictMode>
    <App />  //이름 변경 가능
  </React.StrictMode>
);

reportWebVitals();

 

 

  • index.css

body{
  background-color: rgb(197, 238, 238);
}
.title{
  color: white;
}

 

 

  • index.html

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

 

 

 

  • 컴포넌트 생성
  • cf. 리액트 이용 안 한 웹페이지

<body>
    <header>
        <h1>웹 카페</h1>
        <p>웹에 대해 알아봅시다</p>
    </header>
    <nav>
        <ul>
            <li><a href="html5.html">HTML5에 대해</a></li>             
            <li><a href="css3.html">CSS3의 모든 것</a></li>
            <li><a href="js.html">JAVASCRIPT란?</a></li>
        </ul>
    </nav>
    <article>
        <h2>HTML5에 대해</h2>
        <p>홈페이지의 뼈대를 말한다</p>
    </article>
</body>

 

 

=> 리액트로 바꾸기 (세 컴포넌트)

 

  • App.js

import { Component } from 'react';
import './App.css';

class Subject extends Component{  //컴포넌트 생성
  render(){
    return(
      <header>
        <h1>웹 카페</h1>
        <p>웹에 대해 알아봅시다</p>
      </header>

    );
  }
}

class TOC extends Component{
  render(){
    return(
      <nav>
        <ul>
            <li><a href="html5.html">HTML5에 대해</a></li> 
            <li><a href="css3.html">CSS3의 모든 것</a></li>
            <li><a href="js.html">JAVASCRIPT란?</a></li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component{
  render(){
    return(
      <article>
        <h2>HTML5에 대해</h2>
        <p>홈페이지의 뼈대를 말한다</p>
      </article>
    );
  }
}

class App extends Component{
  render(){ //render: export 도움
    return ( //제작한 컴포넌트 넣기
      <div className='App'> 
        <Subject></Subject> //html 아님 (콘솔 입력 시 오류로 인식)
        <TOC></TOC>
        <Content></Content>
      </div>
      );
  }
}

export default App;

 

 

 

  • 앱 배포 방법

1.터미널

npm run build => build 폴더 생성됨
2. 배포용 리액트 페이지 실행

 


※ npx serve -s build
주소 알려줌
(cmd : npm install -g serve 미리 해야 함) 

 

 

  • props (속성) 생성
  • App.js

import { Component } from 'react';
import './App.css';

class Subject extends Component{
  render(){
    return(
      <header>
        <h1>{this.props.title}</h1> 
        <p>{this.props.sub}</p> 
      </header>
    );
  }
}

class TOC extends Component{
  render(){
    return(
      <nav>
        <ul>
            <li><a href="html5.html">HTML5에 대해</a></li> 
            <li><a href="css3.html">CSS3의 모든 것</a></li>
            <li><a href="js.html">JAVASCRIPT란?</a></li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component{
  render(){
    return(
      <article>
        <h2>{this.props.title}</h2>
        <p>{this.props.desc}</p>
      </article>
    );
  }
}

class App extends Component{
  render(){ //render: export 도움
    return ( //제작한 컴포넌트 넣기
      <div className='App'> 
        <Subject title='웹 카페' sub='웹에 대해 알아봅시다!'></Subject> 
        <Subject title='리액트' sub='리액트에 대해 알아봅시다'></Subject> 
        <TOC></TOC>
        <Content title='HTML5에 대해' desc='홈페이지의 뼈대를 말한다'></Content>
      </div>
      );
  }
}

export default App;

 

 

 

  • 컴포넌트를 파일로 분리
  • Subject.js

import { Component } from 'react';

class Subject extends Component{
    render(){
      return(
        <header>
          <h1>{this.props.title}</h1>
          <p>{this.props.sub}</p>
        </header>
      );
    }
}

export default Subject;

 

 

  • TOC.js

import { Component } from 'react';

class TOC extends Component{
    render(){
      return(
        <nav>
          <ul>
              <li><a href="html5.html">HTML5에 대해</a></li> 
              <li><a href="css3.html">CSS3의 모든 것</a></li>
              <li><a href="js.html">JAVASCRIPT란?</a></li>
          </ul>
        </nav>
      );
    }
  }

export default TOC;

 

 

  • Content.js

import { Component } from 'react';

class Content extends Component{
    render(){
      return(
        <article>
          <h2>{this.props.title}</h2>
          <p>{this.props.desc}</p>
        </article>
      );
    }
  }

export default Content;

 

 

  • App.js

import { Component } from 'react';
import './App.css';
import Subject from './components/Subject';
import TOC from './components/TOC'
import Content from './components/Content'

class App extends Component{
  render(){ //render: export 도움
    return ( //제작한 컴포넌트 넣기
      <div className='App'> 
        <Subject title='웹 카페' sub='웹에 대해 알아봅시다!'></Subject> 
        <Subject title='리액트' sub='리액트에 대해 알아봅시다'></Subject>
        <TOC></TOC>
        <Content title='HTML5에 대해' desc='홈페이지의 뼈대를 말한다'></Content>
      </div>
      );
  }
}

export default App;

 

 

 

 

 

 

 

'Programming > 국비학원' 카테고리의 다른 글

2220802 - 리액트 - (Read) 메뉴 클릭 시 내용 표시 / (Create) 생성버튼 클릭 시 목록에 추가  (0) 2022.08.03
220801 - 리액트  (0) 2022.08.02
220728 - 제이쿼리 - 플러그인 제작  (0) 2022.07.29
220727 - 제이쿼리 - 플러그인 (Masonry, bxslider, cookie)  (0) 2022.07.28
220726 - 제이쿼리 - colorbox 플러그인, ajax(json, xml 데이터 처리)  (0) 2022.07.27

'Programming/국비학원' Related Articles

티스토리툴바