[React] React란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리

 

React 설치 수정 배포

1. 개발환경 세팅

1) https://ko.reactjs.org/
2) 우측 새로운 React 앱 만들기
3) 추천 툴체인 - Create React App -> create-react-app site 이동
(creae-react-app을 사용하려면 node.js가 설치되어 있어야 한다.
node.js 설치하면 터미널에서 npx 라는 명령어를 사용할 수 있게 된다.)

터미널 명령어로 실행
4) npx create-react-app . (.은 현재 디렉토리를 의미)
5) npm start (create react app을 구동)

 

2. 소스 코드 수정 방법

1) src>index.js 확인,
입구 파일로서, 이 파일에 있는대로 create react app을 구동시키게 되며,
여러가지 전역적인 설정들이 들어가 있다.
2) App.js : 내용을 편집하며 ui를 만들어 나가는 것 (index.js의 App 태그)
3) App.js 의 디자인은 상단에 import 되어있는 App.css 확인 및 수정

4) index.js - App 태그 상단에 id가 root인 태그로 랜더링 되어 있는 것 확인
5) public>index.html : id="root" 존재

 

3. 배포 : 서비스에 최적화되어있는 효율적인 배포 방법

1) 터미널 명령어 ctrl + c (기존 개발환경 작업 종료)
2) npm run build : 배포판을 만드는 과정
3) build>index.html 확인 : 배포시에는 파일 용량을 줄이기 위해 모든 공백이 삭제된다.
4) npx serve -s build : build 폴더에 있는 index.html 을 서비스하는 웹서버 실행된다.

 

라이브러리와 프레임워크의 차이

공통적으로 소프트웨어 개발을 돕는 도구이지만, 기본적인 개념과 사용 방식에서 차이가 있습니다.

- 라이브러리는 특정 기능을 수행하는 코드의 집합으로, 개발자가 필요에 따라 선택적으로 사용할 수 있습니다.

왜냐하면 라이브러리를 사용할 때는 개발자가 애플리케이션의 흐름을 제어하며 필요한 라이브러리의 함수나 메서드를 호출하기 때문입니다. 즉, 개발자가 주도적으로 코드를 작성하며, 라이브러리는 그 과정을 보조하는 역할을 합니다.

- 프레임워크는 애플리케이션의 구조 또는 틀을 제공하며, 개발을 위한 기본적인 형태와 필수 요소를 포함하고 있습니다. 개발자는 프레임워크가 정한 규칙과 구조 내에서 개발을 진행해야 합니다.

 

컴포넌트(Component)와 JSX

가장 기본이 되는 단위는 컴포넌트입니다. 컴포넌트는 재사용 가능한 UI 조각으로, 리액트 앱을 구성하는 빌딩 블록 역할을 합니다.

왜냐하면 컴포넌트를 통해 데이터를 처리하고 UI를 표시하기 때문에, 프로젝트의 유지 보수성과 확장성이 크게 향상됩니다.

const element = <h1>Hello, world!</h1>;

JSX는 JavaScript를 확장한 문법으로  React “엘리먼트(element)” 를 생성, 마크업과 로직을 하나의 파일에서 관리할 수 있게 해주는 템플릿 언어입니다. 왜냐하면 JSX를 사용하면 UI 구성 요소를 더 명확하게 표현할 수 있으며, 개발자의 생산성을 향상시키기 때문입니다.

JSX는 HTML과 비슷해 보이지만, 실제로는 JavaScript의 일부이며 컴파일 과정을 거쳐 JavaScript 코드로 변환됩니다.

• JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

 

컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다.

즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

• JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용, JSX에서 class는 className가 되고 tabindex는 tabIndex

JSX는 객체를 표현

Babel은 JSX를 React.createElement() 호출로 컴파일

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

//동일

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

가상 DOM(Virtual DOM)과 실제 DOM의 관계

리액트는 어플리케이션의 성능을 최적화하기 위해 가상 DOM을 사용합니다. 가상 DOM은 실제 DOM의 가벼운 복사본으로, 변경사항이 발생하면 가상 DOM에 먼저 적용됩니다. 왜냐하면 가상 DOM을 사용하면, 변경사항을 한 번에 실제 DOM에 반영할 수 있어, 불필요한 DOM 조작을 줄이고 성능을 향상시킬 수 있기 때문 =>  하지만 가상돔을 관리하기위해 그만큼의 많은 메모리와 CPU오버헤드 발생

현재 react 공식 문서에는 Virtual DOM이라는 용어 모두 제거됨

 

상태(State)와 속성(Props)

- Props는 상위 계층의 컴포넌트와 데이터 교환을 위해 사용한다

- State는 다른 컴포넌트와 상호 교환의 목적이 아닌 해당하는 컴포넌트의 외부 접근을 고려하지 않고 내부적으로 내부 클래스에서만 사용하는 것이 목적

 

리액트에서 상태(State)는 컴포넌트의 데이터를 관리하는데 사용됩니다. 상태는 해당 컴포넌트 내에서만 유지되며, 사용자 인터랙션 또는 시스템 이벤트로 인해 변경될 수 있습니다. 왜냐하면 상태는 컴포넌트의 동적인 데이터를 관리하고, UI의 변화를 초래하기 때문입니다.

속성(Props)은 컴포넌트 간에 데이터를 전달하는 방법으로, 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달합니다.

왜냐하면 Props는 컴포넌트의 재사용성을 높이고, 애플리케이션 전체에서 일관된 데이터 흐름을 제공하기 때문입니다.

상태와 속성의 정확한 이해와 사용은 리액트 애플리케이션의 데이터 흐름과 UI 업데이트를 관리하는 데 중요합니다.