01. React, 컴포넌트 생성

1. 리액트(React)

 - facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리
 - 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며,
    데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공
 - Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상
 - 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용
 - JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴포넌트를 정의

 

• 라이브러리(liberary) vs 프레임워크(Framework)

라이브러리	- 개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식 - 애플리케이션의 전체 구조를 개발자가 직접설계 - 추가적인 기능을 제공하거나 특정 기능을 위한 도구 ex) 리액트, Express.js, jQuery
프레임워크	- 제공된 틀 안에서 코드를 작성하고 프레임워크가 코드를 호출하여 실행 - 개발자는 프레임워크가 정의한 규칙과 패턴을 따라야 함 - 애플리케이션의 구조와 제어 흐름을 결정하며, 개발자는 프레임워크에 의해 제어되는 애플리케이션의 일부분을 작성 ex) 자바, 파이썬

 

• 터미널 툴 설치하기

맥용: iterm2
윈도우: cmder https://cmder.app/

Cmder | Console Emulator

\

exe 파일 실행

선택

 

 

• 버전확인하기

  

 

          node -v 

          npm -v 

          git --version

       

  

버전확인

 

• 기능추가 (패키지 매니져: 속도  향상)

 

 

        corepack enable

 

  

- node.js의 패키지 매니저인 npm의 새로운 기능 - npm의 내장 패키지 설치 속도를 향상키시는 기능 - npm 7 이후에 도입된 기능

아무것도 실행되지 않음

 

• 버전확인

  

 

              yarn -v

  

 

 

---

• 패키지 도구

1. npm(Node Package Manager)

-  Node.js 패키지를 관리하고 배포하는데 사용되는 표준 패키지 관리자 - 패키지를 설치하거나 업데이트 하며, 프로젝트를 빌드 및 실행하는 데 사용

2. npx(Node Package Excute)

- npm 패키지를 실행하고 사용하는 도구 - 로컬에 설치된 패키지를 직접 실행할 수 있음(프로젝트의 의존성을 전역으로 설치하지 않고도 패키지를 사용할 수 있음)   (ex) npx create-react-app 앱이름

3. yarn

- JavaScript 패키지 매니저로, npm과 유사한 역할을 함 - Facebook, Google, Exponent ... 개발자들이 공동으로 개발한 오픈 소스 프로젝트 - npm보다 빠른 속도와 안정적인 패키지 설치를 제공하여 다양한 기능을 포함

---

 

• corepack 전역으로 실행

 

 

        npm i -g corepack

 

  

 

2. 앱 만들기 

  

 

• 경로이동

 

 

      cd 경로

 

  

 

• 리액트 앱 만들기

  

 

          yarn create react-app basic

 

 

 

• 경로이동

 

 

      cd basic

 

  

• yarn 실행

      

 

       yarn start

  

 

 

• 확인

      

 

       ls

  

 

 

• Visual Studio 실행

      

 

       code .

  

 

 

 

3. 디렉토리 확인

 - create-react-app을 사용하여 앱을 생성 후 기본 디렉토리 및 파일 확인

 

• pulic 디렉토리
  : 브라우저에서 직접 액세스할 수 있는 파일들이 포함
    index.html: 웹 애플리케이션의 진입점

 

•  src 디렉토리
  : 애플리케이션의 소스 코드를 포함
   - index.js: React 앱의 진입점 파일.
      ReactDOM.render를 호출하여 React 컴포넌트를 DOM에 렌더링
   -  App.js: 기본적인 앱 컴포넌트가 정의된 파일. 앱의 기본 구조의 레이아웃을 정의
   -  App.css: App 컴포넌트에 적용된느 CSS 스타일을 정의

 

 

• 리액트 공식 사이트: https://react.dev/

React

 

 

한국어로도 번역되어 있음

 

 

• 확인 후 yarn 실행

 

          ls

 

           yarn start

  

오류나면 Command Prompt로 변경

 

• src > index.js

 

• app.js 

jsx 문법으로 작성

 

 

4. 컴포넌트 만들기

  

 

 

• src > Hello.js 생성

 

• src > Hello.js 작성

 

 

          < src > Hello.js  >

 

            import React from 'react';

            function Hello(){

                return <div>안녕하세요 React</div>

            }

            export default Hello;

 

 

  

* 보통 jsx -> UI 컴포넌트 js -> 컨트롤러

 

• src > App.js

  

      < src > App.js >

 

 

      import React from "react";

      import Hello from "./Hello";

      function App(){

        const userid = 'apple';

        const style = {

          backgroundColor: 'deepskyblue',

          color: 'deeppink',

          fontSize: 30,

          padding: '1em'

        }

        return (

          <>

            <Hello/>

            <Hello/>

            <Hello/>

            <div>DIV 사용</div>

            <div style={style}>아이디: {userid} </div>

          </>

        );

      }

      export default App;

 

 

 

 

 

• 문제) App.css에 아래와 같이 style을 설정하고 App.js에 적용해보자

이름 : .black-box 속성:          background : black;         width : 80px;         height: 80px;

 

      < src > App.css >

      .black-box {

        background: black;

        width: 80px;

        height: 80px;

      }

  

 

 

 

• src > App.js

  

      < src > App.js  >

 

      import React from "react";

      import Hello from "./Hello";

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

      function App(){

        const userid = 'apple';

        const style = {

          backgroundColor: 'deepskyblue',

          color: 'deeppink',

          fontSize: 30,

          padding: '1em'

        }

        return (

          <>

            <Hello/>

            <Hello/>

            <Hello/>

            <div>DIV 사용</div>

            <div style={style}> 아이디: {userid} </div>

            <div className="black-box"> </div> {/*  추가 */}

          </>

        );

      }

      export default App;

 

 

• 크롬 브라우저 확장프로그램 설치 (컴포넌트 확인)

 

 

• abnb 사이트 확인

 

 

• JSX에서 주석

  

 

         {/*주석은 화면에 보이지 않습니다*/}

          /* 자바스크립트 문법의 주석*/

 

 

React :  {/* */} JavaScript: /* */