React, yarn, jsx (2024-05-13)

리액트(React)

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

 

 

 

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

    라이브러리
    - 개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식으로 동장
    - 애플리케이션의 전체 구조를 개발자가 직접 설계
    - 추가적인 기능을 제공하거나 특정 기능을 수행하기 위한 도구

    프레임워크
    - 제공된 틀 안에서 코드를 작성하고 프레임워크가 코드를 호출하여 실행
    - 개발자는 프레임워크가 정의한 규칙과 패턴을 따라야 함
    - 애플리케이션의 구조와 제어 흐름을 결정하며, 개발자는 프레임워크에 의해 제어되는 애플리케이션의 일부분을 작성

 

 

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

yarn -v

npm i -g corepack

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

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

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

 

< 각종 명령어 >

리액트 앱 만들기
    
    npx create-react-app basic
    
    yarn create react-app basic

 

node -v
npm -v
git --version

yarn -v
npm i -g corepack

 

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

React

 

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

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

src 디렉토리
애플리케이션의 소스 코드를 포함하는 곳 
    index.js: React 앱의 진입점 파일. ReactDOM.render를 호출하여 React 컴퍼넌트를 DOM에 렌더링 시키는 역할이 들어있다
    App.js: 기본적인 앱 컴퍼넌트가 정의된 파일. 앱의 기본 구조와 레이아웃을 정의
    App.css: App 컴퍼넌트에 적용되는 CSS 스타일을 정의

 

크롬 부라우저 확장 프로그램 설치
    React Developer Tools 



JSX에서의 주석

    {/* 주석 내용 */}


컴퍼넌트에게 값 전달하기

    JSX
    <Hello userid = "apple"/>

    Component
    function Hello(props){
    <div>안녕하세요. {props.userid}님 </div>
    }

✔ JSX에서 null, false, undefined를 랜더링 하면 화면에 아무것도 출력하지 않음

 

 

 

App.js

import React from "react";
import Hello from "./Hello";
import "./App.css";
import Member from "./Member";
import Wrapper from "./Wrapper";

function App(){
  
  const userid = 'apple';
  const style = {
    // css 에서는 background-color
    // jx에서는 
    backgroundColor: 'deepskyblue',
    color: 'deeppink',
    fontSize: 30,
    padding: '1em'
  }
   

  return (
    <>
    {/* 주석 예시.  화면에 보이지 않습니다. */}
      <Hello/>
      <Hello/>
      <Hello userid = "apple"/>
      <Hello userid = "apple" name = "김사과" color = "deeppink"/>
      <div>DIV 사용</div>
      <div style = {style}>아이디 : {userid} </div>
      <div className ='black-box'></div>
      <Member userid='banana' name ="반하나" color="deepskyblue" />

      <Wrapper>
        <Hello userid = "apple" name = "김사과" color = "deeppink"/>
        <Hello userid = "banana" name = "반하나" color = "deepskyblue"/>
        <Member userid='orange' name ="오렌지" color="gold" isLover={true} />
        <Member userid='melon' name ="이메론" color="yellowgreen"isLover={false} />
      </Wrapper>
    </>
  );
}

export default App;

 

Hello.js , Member.js, Wrapper.js

import React from 'react';

function Hello(props){
    return <div style={{color: props.color}}>안녕하세요 {props.userid}({props.name})</div>
}

Hello.defaultProps = {
    userid : '아이디없음',
    name : '이름 없음',
    color : 'blue'
}

export default Hello;

 

import React from 'react';

function Member({userid, name, color, isLover}){
    return <div style={{color}}>안녕하세요 {userid}({name} {isLover && <b>❤</b>})</div>
    // isLover 값이 있다면 하트를 표시 없다면 &&뒤는 확인하지 않음
    {/* {isLover ? <b>❤</b> : null} */}
    // isLover 값이 있다면 하트를 표시 없다면 null 값 
}


export default Member;

 

import React from "react";

function Wrapper({ children }){
    const style = {
        border : " 3px solid deeppink",
        padding : '10px'
    }
    return (
        <div style = {style}>
            {children}
        </div>
    )
}

export default Wrapper;

 

문제 

JSX를 사용하여 아래와 같이 출력되도록 작성해보자.
(단, 프로젝트의 이름은 jsx)

    김사과님이 학습한 내용들
    * 파이썬
    * HTML
    * CSS
    * JavaScript
    * MySQL
    * MongoDB

    [이미지]

 

app.js

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

function App() {
  const name = '김사과';
  const list = ['파이썬','HTML','CSS','JavaScript','MySQL','MongoDB'];

  return (
    <>
    <h2 className='deeppink'>{name}님이 학습한 내용들</h2>
    <ul>
      {
        list.map((item) => (
          <li>{item}</li>
        ))
      }
    </ul>
    <img style = {{width:'200px', height:'100px'}} src="https://images.chosun.com/resizer/jALq4imgNBe_THeLiwnShwJuzhg=/616x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/ZKPVBQPHWVDYROSR7MHJ7NZIVA.jpg" alt="AI"></img>

    </>
    );
}

export default App;

 
App.css

.deeppink {

  color : deeppink;

}