36. React란 및 설치

1. 리액트(React)

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

 

2. 라이브러리(library) vs 프레임워크(framework)

라이브러리

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

프레임워크

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

 

3. 터미널 툴

맥: iterm2 다운로드
윈도우: cmder 다운로드(https://cmder.app/)

node -v
npm -v
git --version

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

yarn -v

npm i -g corepack

 

4. 패키지 도구

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-ko.dev/

 

---

5. React 설명

크롬 브라우저 확장 프로그램 설치

React Developer Tools

 

 

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(porps){
        <div>안녕하세요. {props.userid}님</div>
    }

 

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