23.02.28(JSX)

😀😀

 

리액트는 컴포넌트들의 집합

 

- 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 함.

- Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임.
  (노드 공식 사이트에는 노드를 위와 같이 설명하고 있음.)

  ※ 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 뜻한다.
     따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기이다.
     특히 2008년 구글이 V8 엔진을 사용하여 크롬을 출시했고, V8 엔진은 다른 자바스크립트 엔진과 달리 
     매우 빨라 라이언 달(Ryan Dahl)은 2009년 V8 엔진 기반의 노드 프로젝트를 시작하며 세상에 나왔다.

- Node.js에 대한 자세한 설명은 아래 사이트를 참조.
  https://hanamon.kr/nodejs-개념-이해하기/


- 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인
  연관은 없지만, 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하는 것임.
  이 때 사용하는 개발 도구에는 ECMAScript 6(2015년 공식적으로 업데이트한 자바스트립트 문법)를
  호환시켜 주는 바벨(babel), 모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다
  웹 브라우저를 리로딩하는 등의 여러 기능을 지닌 웹팩(webpack) 등이 있음.
  Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치가 됨. npm으로 수많은 개발자가
  만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버존을 관리할 수 있음.
  우리가 지금 공부하려는 리액트 역시 하나의 패키지임.


리액트란?
- 만약 이런 태그가 있다고 생각해 보자..

  <div id="post-1">
     <div class="title">Hello</div>
     <div class="contents">Hello World</div>
     <div class="author">홍길동</div>
     <div class="likes">1</div>
  </div>

- 이 태그에서 <div class="likes">1</div> 을 2로 수정한다고 생각한다면 
  웹 애플리케이션에서 id가 post-1 요소를 찾고 likes 클래스 요소를 찾아서
  내부의 텍스트 노드를 찾아 1을 2로 수정을 해야 함.
  업데이트를 하는 항목에 따라 어떤 부분을 찾아서 변경할지 규칙을 정하는 
  작업은 간단하지만, 애플리케이션 규모가 크면 상당히 복잡해지고 제대로
  관리하지 않으면 성능도 떨어질 수 있는 단점이 생김.

- 페이스북 개발팀에서 이를 해결하기 위해 아이디어를 고안해 냈는데, 어떤 
  데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존
  뷰(view)를 날려버리고 처음부터 새로 렌더링하는 방식을 생각해 냄.
  이렇게 하면 애플리케이션 구조가 매우 간단하고, 작성해야 할 코드양도
  많이 줄어들게 됨. 


- 그러면 리액트란 무엇인가?
- 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용됨.
  오직 뷰(view)만 신경을 쓰는 라이브러리임.

- 리액트 프로젝트에서 특정 부분이 어떻게생길지 정하는 선언체가 있는데
  이를 컴포넌트(component)라고 함. 컴포넌트 하나에서 해당 컴포넌트의
  생김새와 작동 방식을 정의를 하게 됨.
  리액트는 작고 독립적인 컴포넌트의 코드 블록을 조합하여 빠르고 효율적으로
  화면을 구성함. 컴포넌트는 '레고 블록' 이라고 생각하면 됨. 그래서 작은
  컴포넌트가 모여서 화면을 구성하게 되는 것임.

- 랜더링 : 사용자 화면에 뷰(view)를 보여주는 것을 말함.

- NPM(Node Package Manager)
  ==> 필요한 라이브러리를 내려 받아서 설치하고 삭제하는 등의 관리를 해 주는
      프로그램임. 실제로 npm은 node_modules 폴더에 라이브러리를 내려 
      받아서 저장하고 package.json이라는 파일에 설치된 라이브러리의
      정보를 적어 저장을 함. 실제 라이브러리와 라이브러리 명세 파일을 
      따로 관리하는 것임.
      예를 든다면 A가 개발자 B에게 프로젝트를 공유할 때 용량이 큰 라이브러리까지
      전송할 필요 없이 라이브러리 명세와 핵심 코드만 전달하면 됨. 그러면 
      개발자 B는 package.json의 목록을 이용하여 손쉽게 라이브러리를 내려
      받을 수 있게 됨.

- Virtual DOM(가상 DOM) : 리액트이 주요 특징 중 하나임.
  DOM이 무엇이었나요? Document Object Model의 약자임. 즉, 객체로 문서 구조를
  표현하는 방법임. 주로 XML이나 HTML로 작성을 함.
  하지만 DOM의 치명적인 약점이 있음. HTML은 자체적으로 정적인 구조를 가지고 있음.
  즉, 동적 UI에 최적화되어 있지 않다는 점. 그래서 자바스크립트를 통해서 동적으로
  만들어 준 거임. 하지만 요즘 흔히 접하는 큰 규모의 웹 애플리케이션 같은 경우에는
  스크롤바를 내리면 내릴수록 수많은 데이터가 로딩이 됨. 각 데이터를 표현하는 
  요소(element)들이 있겠죠. 한 페이지에 요소의 갯수가 몇 백개, 몇 천개 단위로 
  많다면 표현을 할 때 div 갯수는 상상을 초월하겠죠.. 
  이렇게 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주게 되면 성능에
  이슈가 조금씩 발생을 하게 됨. 즉, 느려진다는 이야기임. 

  DOM 자체는 빠름. DOM 자체를 읽고 쓸 때의 성능은 느리지 않음. 하지만 웹 브라우저에서
  DOM에 변화가 일어나면 웹 브라우저가 CSS를다시 연산을 하고, 레이아웃을 구성하고, 
  페이지를 리페인팅하게 됨. 이 과정에서 시간이 느려지는 것임.

- 리액트는 Virtual DOM 방식을 사용하여 DOM의 처리 횟수를 최소화하고 효율적으로 진행함.
  즉, 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여
  사용을 함. 마치 실제 DOM의 복사본과 비슷함.

  리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 때 세가지 절차를 밟음.
  1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링함.
  2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교함.
  3. 바뀐 부분만 실제 DOM에 반영을 함.    

 

/ 아래 문장은 컴포넌트를 페이지에 렌더링하는 역할을 하며,
// react-dom/client 모듈을 불러와서 사용을 한다는 의미임.//
이 함수의 인자에는 페이지에 렌더링할 내용을 JSX 형태로 작성을 하면 됨
// 그러면 createRoot() 함수 안에 있는 root라는 id에 JSX 형태로 작성된 내용을 화면에 보여주게 됨

const root = ReactDOM.createRoot(document.getElementById('root'));

 

😀요소가 여러개면 부모요소를 추가하여 하나로 묶어줘야함 (jsx문법 특징임)

 

😀class를 못씀 => 객체가 사용되는데 객체 선언시 class를 쓰므로 className을 써야함

     for를 못씀 ==> for반복문 때문에 htmlFor를 사용해야 함

 

😀Fragment == <>

       ==> div로 묶이는게 개발자모드에 보이지 않음

// JSX 문법 작성시 주의사항
// 1. 여러 가지 요소(태그)가 있다면 반드시 부모요 하나로 감싸 주어야 한다.
//    ==> Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록
//        컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문임
// 2. Fragment 태그르 사용해도 됨 => <div>태그를 사용하고 싶지 않은 경우
//    ==> Fragment 키워드를 생략해도 됨
// 3. JSX 문법에서는 JavaScript 코드를 활용할 수 있다
//    ==> - 자바스크립트 코드를 작성 시에는 {}(중괄호)를 사용해야 함//      
              - {}(중괄호) 안에는 변수를 그대로 사용할 수 도 있으고, 자바스크립트로된 표현식은 모두 사용이 가능함
// 4. 조건부 연산자//    ==> - JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없음
//          하지만 조건에 따라 다른 내용을 렌더링해야할 경우에는
//          JSX밖에서 if문을 이용하여 사전에 값을 설정하거나, { } 조건부 연산자(3항연산자)를 사용하면 됨

 

1. <div></div>

 

2. <Fragment></frament>, <> </>

 

3. const product = "호랑이";

root.render(

   <>

       <h2>밤마다 {product}가 나옵니다.</h2>

        <p>도망갑시다</p>

   </>

);

 

{/* 조건부 연산자
 JSX 내부의 자바스크립트 표혀닉에서는 IF문을 사용하지 못함.

        하지만 조건에 따라 다른 내용을 렌더링해야 하는 경우에는 JSX밖에서 IF문을 사용하여 사전에 값을 설정하거나

        JSX 안에서는 연산자(삼항연산자)를 사용하면 됨

        예)  {userName === "홍길동" ?

                <h2 style={style}>홍길동입니다.</h2> : <h2>홍길동이 아닙니다</h2>

              }

    */}

       

 

4. const userName = prompt("이름 입력");

root.render(

         {userName === "홍길동" ? <h2>길동이니?</h2> : <h2>넌 누구야,,?</h2>   }

);

 

😀width={300} or "300"

😀{}안에 함수 쓸 때 함수명이 들어간다 =>() 빼야한다는 소리임

😀<br />   ==>br태그 쓰는 법 <br> </br> 도 가능!

😀자바스크립트에서 onclick과 다르게 onClcik 이런식으로 camelcase기법 써야함