[URECA] Day 45 React (리액트 특징, JSX)

자바스크립트

• 초기에는 단순한 연산과 시각적인 효과를 주는 스크립트 언어
• 현재는 웹 어플리케이션에 가장 핵심적인 역할
• 슬랙, 아톰, VScode등을 일렉트론으로 개발(자스로 데스크톱 어플리케이션을 만들 수 있는 프레임워크)
• 페이스북, 디스코드, 페이팔 등등
• 하지만 순수 자바스크립트 만으로는 관리하기 어려움
• 순수자바스크립트 문제 해결위해 프레임워크들 등장
• 프레임워크는 항상 발전하고 새롭게 등장 

---

다양한 프레임워크 

리액트 점유율 킹왕짱!

 

• 다른 프레임워크의 경우 MVC 아키텍쳐를 사용하고 있음.
• 다른 아키텍쳐와 공통점은 모델과 뷰가 있다는 것.
• 모델은 애플리케이션이 사용하는 데이터를 관리
• 뷰는 사용자에게 보여짐
• 애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지않으면 성능이
  저하됨

 

 

 

---

⭐ React

• MVC, MVW 등과 다르게 오직 V(View)만 신경 쓰는 라이브러리
• 특정 부분이 어떻게 생길지 선언하는 선언체가 있는데 이를 컴포넌트라고 함
• 컴포넌트는 재사용이 가능한 API로 수 많은 기능을 내장하고 있음. 컴포넌트 하나에서 해 컴포넌트의 생김새와 작동 방식을 정의함
• 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 함
• 최초의 렌더링인 ‘초기 렌더링 ' 과 데이터 변경으로 인한 ' 리렌더링 ' 이 존재함

---

초기 렌더링

초기 렌더링할때는

객체정보를 반환→ HTML 마크업할때 그 관계들이 끊겨서 this 나 바인딩한다. → DOM 트리에 주입해 → 사용자 화면에 보여줌

• Render()함수를 통해 컴포넌트가 어떻게 생겼는지 정의 → 뷰가 어떻게 생겼고 작동하는지에 대한 정보를 지닌 객체를 반환
• 렌더링 작업이 끝나면 지니고 있는 정보들을 HTML마크업을 만들고 DOM에 주입
• 사용자 화면에 나타나게 됨

컴포넌트를 실제 페이지에 렌더링할때는 분리된 두 가지 절차를 따른다. 

조화 과정(업데이트)

• 뷰를 업데이트 할 때는 '업데이트 과정을 거친다' 라고 하기 보다는 조화 과정을 거친다라고 하는 것이 더 정확한 표현 뷰가 변형되는 것처럼 보이지만 사실 새로운 요소로 변환
• Render 함수가 정보를 지닌 객체를 반환할 때 새로운 데이터를 지닌 뷰와 이전 뷰를 비교하여 업데이트한다 → 전체 컴포넌트를 다시 렌더링 하는 것 처럼 보이지만 최적의 자원을 사용하여 수행하는 것임

Dom 사실 느리지 않아

 

DOM 자체는 빨라

• 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저 CSS를 다시 연산하고, 레이아웃을 구성하고 페이지를 리페인트하는 과정이 시간이 걸리는 것…

⭐ Virtual Idol이 아닌 Virtual Dom

 

앞서 언급된 성능 저하 문제를 해결하기 위해 도입 된 것이 바로 Virtual DOM
실제 DOM에 접근하여 조작하는 대신 마치 사본같은 추상화한 자바스크립트 객체를 구성하여 사용

1. 데이터를 업데이트 하면 전체 U를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제DOM에 적용

(즉, 빨간색 돔을 RealDom에 적용)

 

Virtual DOM을 사용한다고 해서 언제나 항상 빠르지 않음
리액트는 '지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 ' 를 목표하여 만들어짐
작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 빠름

---

React = 라이브러리

• 정말 뷰만 신경쓰기 때문에 다른 기능들은 직접 구현해야 한다
• 다만, 다른 사람들이 만들어 둔 라이브러리를 가져와 사용할 수 있어 자신의 취향대로 스택을 설정하여 사용할 수 있다.
• 여러 라이브러리를 사용해야 하는 단점이 있다.

 

프레임워크 vs 라이브러리

프레임워크	라이브러리
-  컴퓨터 프로그래밍에서 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조이다. -  간단한 뼈대, 골조 라고 도 한다. -  개발자가 정해진 규칙 안에서 코드를 작성해야 함 -  프로그램의 흐름을 프레임워크가 제어 = 주도권이 프레임워크에 있다	- 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. -  구성 데이터, 문서, 도움말 자료, 미리 작성된 코드, 클래스, 값 등을 포함할수 있다. -  특정 기능을 수행하는 도구로서 개발자가 원하는 부분에서 직접 호출하여 사용 -  프로그램의 흐름을 개발자가 제어 = 주도권이 개발자에게 있다

 

	프레임워크	라이브러리
유연성	낮음 - 정해진 방식대로 개발	높음 - 필요한 기능만 선택 가능
학습 곡선	높음 - 구조와 규칙을 익혀야 함	낮음 - 특정 기능만 익히면 사용 가능
개발 속도	빠름 - 기본 구조가 제공됨	상대적으로 느릴 수 있음 - 직접구조 설계 필요
일관성	높음 - 코드 스타일링과 개발 방식이 통일	낮음 - 여러 라이브러리를 조합하면 코드 스타일이 다를 수 있음
확장성	높음 - 표준화된 방식으로 유지보수 용이	상황에 따라 다름 - 구성에 따라 유지보수 난이도가 달라짐
보안	상대적으로 강함 - 내장된 보안 기능 포함	직접 관리해야 함 - 외부 라이브러리 보안 검토 필요

프레임워크 : 레시피와 재료가 포함된 밀키트 → 정해진 방식대로 요리해야 함
라이브러리 : 각종 재료가 존재하는 슈퍼마켓 →  원하는 재료만 골라서 직접 조리

 

• 라이브러리는 다른 라이브러리와 프레임워크와 조합하여 사용 가능

• 프레임워크는 다른 프레임 워크와 사용가능하나, 제약이 상대적으로 심함
      1. 다른 계층(백엔드 + 프론트엔드)
      2. 마이크로서비스처럼 독립적(결제 서비스, 인증 서비스, 추천 시스템)
• 프레임워크는 자체적으로 강한 제어력을 가지기 때문에 같은 역할을 수행하는
프레임워크끼리는 사용이 굉장히 어려움.

 

🫨리액트 공식문서에서 프레임워크와 같이 사용할 것을 권장함
🫨 특히, 가장 먼저 언급되는 Next.js는 풀스택 react 프레임워크로서 근래에 굉장히 많이 쓰임

---

리액트 라이프 사이클

• React를 사용하면 컴포넌트 단위로 UI를 화면에 보이게 하거나 다른U로 변경하거나, 현재 보이는 U를 화면에서 제거할 수 있다.
• 따라서 각 컴포넌트들을 생성(Mounting)하고 업데이트(Updating)하고, 제거(UnMounting)하는 단계를 차례로 겪는 생명주기(LifeCycle)를 가지고 있다는 것

 

React Life Cycle - Class 방식 라이프 사이클

React Life Cycle - 함수 방식 라이프 사이클

함수방식 자체는 이전엔 쓰이지 않았지만, React 16.8 Hooks 업데이트로 라이프 사이클을 다룰 수 있게 됨

함수 방식을 더 많이 사용한다.

---

작업환경 설정

1. Node.js LTS버전( https://nodejs.org/ko)
2. Yarn

3. VS Code 와 플러그인
     1. ESLint
     2. Reactjs Code Sinppets
     3. Prettier-Code formatter
     4. (선택)VS code 한국어

4. Git

5. 프로젝트 생성
     1. yarn create react-app hello-react
     2. npm init react-app <프로젝트 이름>

6. cd hello-react

7. yarn start, npm start

다운이 다되면 Happy hacking이 뜬다. 

 

node_modules - 가장 무거운 녀석, 여기에 라이브러리들이 저장된다. Git에 올리지 않는다.

public - 정적 파일들이 저장되어 있다.

src - 주로 여기서 작업

package.json - 라이브러리들의 버전이 적혀있다.

Readme.md - (리드미 작성을 잘해야좋다.)

yarn.lock - (로고 정말 귀엽다.)

 

 

 

cd로 해당 파일 들어가서

yarn start를 입력해준다. 그러면 짜잔~ 홈페이지 실행된다. 

 

yarn과 npm의 차이점

npm 보완하기 위해 yarn 등장

속도가 훨씬 빠르다

 

🤔 app.js는 어떻게 구성되어 있는가?

<div></div>로 작성하면 JSX에는 부모요소가 하나 있어야 된다고 뜬다. 

🤔 왜 안될까?

div는 커다란 요소 안에 감사져 있어야된다 .

(요소 여러개가 부모 요소 하나에 감싸져 있어야한다. 밑에 코드와 같이.. 그러면 오류 안난다)

// import logo from './logo.svg';
// .은 같은 폴더를 의미한다.
import './App.css';

function App() {
  return (
    // 여기도 / 가능 가장 큰 부모요소부터 중괄호 주석 사용
    <div>
      <div className="App">{/* 이게 주석임 */}</div>
    </div>
  );
}

export default App;

import './App.css';

function App() {
 const name = '자바리액트';
  // const -> 한번 지정하고 나면 변경 불가능한 상수/변수 선언
  // let -> 동적인 값을 담을 수 있는 변수를 선언할 때 사용
  return (
    // 여기도 / 가능 가장 큰 부모요소부터 중괄호 주석 사용
    <div>
      {/* <h1>리액트입니다.</h1>
      <h2>안녕 리액트</h2> */}

      {/* 자바스크립트 표현 */}
      <h1>{name}안녕</h1>
      <h2>자바스크립트 표현</h2>
    </div>
  );
}

export default App;

if문 대신 조건부 연산자

import './App.css';

function App() {
  const name = '자바리액트';
  return (
    <div>
      {/* if문 대신 조건부 연산자 */}
      {name === '자바리액트' ? (
        <h1>자바리액트가 맞습니다.</h1>
      ) : (
        <h1>자바리액트가 아닙니다.</h1>
      )}
    </div>
  );
}

export default App;

AND 연산자 &&연산자를 사용한 조건부 렌더링

import './App.css';

function App() {
  const name = '자바리액트';
  return (
    <div>
      {/* AND 연산자 &&연산자를 사용한 조건부 렌더링 */}
      {name === '자바리액트' ? <h1>자바리액트가 맞습니다.</h1> : null}
    </div>
  );
}

export default App;

Undefined를 랜더링하지 않을때

import './App.css';

function App() {
  const name = '자바리액트';
  const named = undefined;
  return (
    <div>
      {/* Undefined를 랜더링하지 않을때 */}
      {named || '리액트 언디파인'}
    </div>
  );
}

export default App;

미리 선언하여 스타일을 넣는 방법

import './App.css';

function App() {
  const name = '자바리액트';

  const style = {
    backgroundColor: 'black',
    color: 'aqua',
  };
  return (

    <div>
      {/* 미리 선언하여 스타일을 넣는 방법 */}
      <div style={style}>{name}</div>
    </div>
  );
}

export default App;

인라인 스타일 - 미리 선언하지 않고 쓰는 방법

import './App.css';

function App() {
  return (
    <div>
      {/* 인라인 스타일 - 미리 선언하지 않고 쓰는 방법 */}
  		<div style={{ backgroundColor: 'black', color: 'aqua' }}>{name}</div>
    </div>
  );
}

export default App;

className 사용한 스타일링 방법

import './App.css';

function App() {
  const name = '자바리액트';
  return (
    <div>
      {/* className 사용한 스타일링 방법 */}
      <div className="react">{name}</div>
    </div>
  );
}

export default App;

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 10px;
}

import './App.css';

function App() {
  const name = '자바리액트';
  return (   
     {/* 셀프클로징 태그 */}
      <input></input>
      <input />
    </div>
  );
}

export default App;

 

---

 var 
- 변수 선언
- 단점: 동일한 변수명을 중복해서 선언 가능(=> 프로그램에 버그 발생할 수 있다.)

let 
- es6에 추가된 변수 선언
- 동일한 이름으로 중복해서 선언할 수 없음.

const 
- es6에 추가된 변수 선언
- 동일한 이름으로 중복해 선언 할 수 없음

기존함수
- 인자에 값이 전달되지 않으면 error 발생하지 않는데 인자의 값은 undefined로 설정됨

default parameter
 - 함수의 인자 값을 기본 값으로 설정한다. 
- 선언 방식
function 함수명(인자 = 기본값)

react 객체 생성 함수
Root Dom에 렌더링할 ReactDom 객체를 생성하는 함수
ReactDOM.createRoot(root)

<StrictMode>를 통해 개발 중에 컴포넌트에서 발생하는 버그를 빠르게 찾을 수 있다. </StrictMode>

JSX JavaScript를 확장한 문법으로 react에서 "엘리먼트(element)"를 생성한다.  

형식: <태그명> 내용 {자바스크립트} </태그명>
{}: 자바스크립트 표현식(변수, 함수 등) 넣는다.

JSX 표현식이 정규 javascript 함수 호출이 되고 javascript객체로 인식된다.
즉, JSX를 if 구문 및 for loop 안에 사용하고,
변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.