Techniques for dealing with REACT_JSX

• React를 만든 이유 : 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해

• 페이스북 👩🏻‍💻 아이디어 : '어떤 데이터가 변할 때마다 어떠한 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링을 하자'
  → 애플리케이션구조가 매우 간단하고, 작성해야할 코드 양도 많이 줄어듬
  → 하지만, 웹브라우저에서 이 방식대로 하면 cpu점유율도 크게 증가하고(DOM은 느리니까), 메모리도 많이 사용할 것이고, 사용자가 인풋박스에 텍스트 입력시 기존 렌더링 된 것은 사라지고, 새로 렌더링하면 끊김 현상이 발생할 것이다, 그래서
  → 최대한 성능을 아끼고 편안한 사용자경험(userExperience)을 제공하면서 구현하기 위해 개발한 것이 : React
  

1. 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
			컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
			(템플릿 : 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 것, 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환한다.)

2. 렌더링 : 사용자화면에 뷰를 보여주는 것
		  리액트라이브러리는 뷰를 렌더링 할 떄 : 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공한다, 이 이유를 파악하려면,
            → (1)리액트 컴포넌트가 최초로 실행한 '초기렌더링', 
            → (2)컴포넌트의 데이터변경으로 다시 실행되는 '리렌더링'개념을 이해해야힌다.

1. 초기렌더링

• 초기렌더링
  - 어떤 UI관련 프레임워크나 라이브러리를 사용하든지 간에 처음에 어떻게 보일지를 정하는 것
  - 리액트에서는 이를 다루는 render함수가 있다.
  
• render(어쩌고) {저쩌고}
  - 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.
  - render()함수는 html형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
  - 컴포넌트 내부에는 또다른 컴포넌트들이 들어갈 수 있다.

  • 이때, render()함수를 실행하면 : 그 내부에 있는 컴포넌트들도 재귀적(어떤 사건이 자기자신을 포함하고 다시 자기자신을 사용하여 정의될때를 말함. 즉,무언가를 설명할 때 자기자신을 포함하는 것을 말한다. recursive)으로 렌더링한다.

  • 이렇게 최상위 컴포넌트의 렌더링 작업 끝나면 갖고 있는 정보들을 사용해서 HTML markup을 만들고, 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다.

    • 컴포넌트를 실제 페이지에 렌더링 하는 것?
    • • (1) 문자열 형태의 HTML코드를 생성한뒤
    • • (2) 특정 DOM에 해당 내용을 주입하면 이벤트가 적용 된다.

    이렇게 : 렌더링 → HTML마크업<div>...</div> --(주입)→ DOM → 실제페이지

2. 뷰를 업데이트

• 뷰를 업데이트 한다 = 조화과정(reconciliation)을 거친다
  - 컴포넌트에서 데이터에 변화가 있을 때, 보이기로는 '변화에 따라 뷰가 변형되는 것'처럼 보이지만,
  • 사실은, 새로운 요소로 갈아 끼우기 때문이다.
  • 이 작업도 render()함수가 맡아서 함
  • 컴포넌트는, 데이터 업데이트 시 단순히 업데이트한 값을 수정하는게 아니라 새로운 데이터를 가지고 render()함수를 또다시 호출하면 그 데이터를 가진 뷰를 생성해내고, 이때 render()함수가 반환하는 결과를 곧바로 DOM에 반영하지는 않고 이전에 render()함수가 만들었던 컴포넌트 정보와 현재 render()함수가 만든 컴포넌트 정보를 비교한다.
  • 즉, 자바스크립트를 사용하여 두가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM트리를 업데이트하는 것.
  • 결국, 방식자체는,
  • 루트node부터 시작하여 ~ 전체컴포넌트를 처음부터 재렌더링하는 것처럼 보이지만,
  • 사실은 최적의 자원을 하용하여 이를 수행하는 것.

3. Virtual DOM

• 리액트의 주요특징 중 하나 Virtual DOM을 사용하는 것
• 리액트에서 데이터가 변하여 웹브라우저에 실제 DOM을 업데이트하는 절차
  1. 데이터 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
  2. 이전 Virtual DOM에 있던 내용과 현재내용 비교
  3. 바뀐 부분만 실제 DOM에 적용

4. 조건부렌더링

const App = () => {
  const name = '릐액트';
  return (
    <div>
    	{name === '리액트' ? <h1>리액트입니다</h1> : null}
         //위와 동일하고 더 짧은 코드
         {name === '리액트' && <h1>리액트입니다</h1>}
    </div>
  )
}

export default App;


* 리액트에서 false를 렌더링할 때는 null처럼 아무것도 나타나지 않는다.

5. undefined

• 리액트컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다. 예를들면,

// 이 코드는 오류뜸 App(...): Nothing was returned from render. this usually means a return
//statement is missing. Or, to render nothing, return null.
import React from 'react';

const App = () => {
  const name = undefined;
  
  return (
    name;
  )
}

export default App;

// 어떤 값이 undefined일수도 있다면 OR연산자 사용해서 간단히 오류방지 ㄱㄱ
// 하지만, JSX내부에서 undefined를 렌더링하는 것은 오류안남
const name = undefined;

return (
  <div>
    {name}
  </div>
)

6. 인라인 스타일링

* 리액트에서 돔요소에 스타일 적용할 때는 문자열형태로 넣는게 아니라 객체형태로 넣어주어야 한다.
	- 카멜표기법 : background-color(X) backgroundColor(O)

const App = () => {
  const name = 'react';
  const styleBabe = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16
  }
  return (
    <div style={styleBabe}>
      {name}
    </div>
  )
}
또는,
  
  <div 
	style={{
      backgroundColor: 'black',
   	  color: 'aqua',
      fontSize: '48px',
      fontWeight: 'bold',
      padding: 16
    }}
  >

    
 * JSX에서는, class 대신 className
 /** */
 

7. ESLint & Prettier

• ESLint : 문법 검사도구
• Prettier : 코드 스타일 자동정리 도구 (;등이 자동추가, ' → ")