React

리엑트(React)

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

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

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

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

터미널 툴

맥: iterm2 다운로드
윈도우: cmder 다운로드

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

리엑트 공식사이트

https://react.dev/

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

public 디렉토리

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

src 디렉토리

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

JSX에서의 주석

{/* 주석을 작성 */}

컴퍼넌트에게 값 전달하기

JSX
    <Hello userid="apple"/>

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

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