React & JSX 기초

Why React?

React는 페이스북 엔지니어들에 의해 만들어진 JavaScript 라이브러리이다.
사람들이 React를 선택한 이유는 다음과 같다.

 

• 빠른 속도. React로 만들어진 앱은 복잡한 업데이트를 다룰 수 있으면서도 반응성이 좋다.
• 모듈성. 큰 파일이 아닌 작고 재사용이 가능한 파일을 사용. React의 모듈성은 JavaScript의 유지보수 관리에 좋은 솔루션이 된다.
• 확장성. 유동적인 데이터를 다루는 대형 프로그램이야말로 React에 적합하다.
• 유연성. 사람들은 아직도 React를 어디에 쓸 수 있을지 고민하며 이곳 저곳에 접목한다.
• 유명성. 취뽀에도 한 몫한다.

 

---

 

이건 또 무슨 새로운 언어인고

const h1 = <h1>Helllo world</h1>;

🤨? 자바스크립트와 HTML의 짬뽕의 모습.
조금 혼란하지만 이것 또한 JavaScript 파일! 실질적으로 HTML은 포함된 것이 아니다.
HTML처럼 보이는 이것은 우리가 앞으로 JSX라 불러야 한다.

 

---

 

그래서 JSX가 뭔데?

JSX는 JavsScript의 확장 문법이다.
React와 함께 사용하도록 만들어졌고, 앞서 말한대로 형태는 HTML과 매우 유사하다!

확장 문법Syntax extension이란?

function Title () {
    return <h1>Hello</h1>
}

function Content (text) {
    return <div>{text}</div>
}

ReactDOM.render(<div><Title/><Content/></div>,document.body);

확장 문법은 JSX가 유효한 JavaScript가 아님을 뜻한다. 웹 브라우저는 읽을 수 없다는 말씀.
만약에 JavaScript 내에 JSX 코드가 적혀있다면, 그 파일은 컴파일Compile을 해야한다.

 

💡 컴파일Compile ? 다른 언어를 동등한 언어로 변환하는 프로세스를 뜻 함.

 

➕ JSX를 사용하는 두 가지 방법
1.컴파일러를 사용해서 JavaScript로 컴파일하거나, 브라우저에서 JSX 파서parser를 이용하여 브라우저에서 JSX를 해석할 수 있다.
2. 일반적으로 개발 중이나 웹 페이지를 디버깅할 때 사용되는데, 페이지 로드 속도를 높이고 페이지 다운로드에 필요한 코드 크기를 줄이기 위해서 프로덕션용 JSX를 미리 컴파일하기도 한다.

 

---

 

JSX Elements

JSX는 JavaScript와 동일하게 다뤄진다. JavaScript 표현식이 쓰이는 곳은 어디든 사용 가능!
이 뜻은 변수에 저장되거나, 함수에 전달되거나, 객체나 배열에 동일하게 저장된다는 뜻이다.
wow 😶! 예시는 다음과 같다.

 

const navBar = <nav>I am a nav bar</nav>;

const myTeam = {
	center: <li>Benzo Walli</li>,
	powerForward: <li>Rasha Loa</li>,
	smallForward: <li>Tayshaun Dasmoto</li>,
	shootingGuard: <li>Colmar Cumberbatch</li>,
	pointGuard: <li>Femi Billon</li>
};

 

---

 

Attributes in JSX

HTML처럼 JSX 요소도 속성을 가지고 있다.
생긴 것과 동일하게 문법도 똑같이 ‘이름 = 값’ 순이다. 하지만 JSX의 ‘값Values’은 반드시 따옴표로 묶어야 한다.

 

attributeName = "attributeValue"

<a href='http://www.example.com'>Welcome to the Web</a>;
 
const title = <h1 id='title'>Introduction to React.js: Part I</h1>;

onst panda = <img src='images/panda.jpg' alt='panda' width='500px' height='500px' />;

 

---

 

JSX의 중첩 표현식

HTML처럼 JSX도 요소를 중첩해서 사용할 수 있다!

<a href="https://www.example.com"><h1>Click me!</h1></a>

 

하지만 표현식이 너무 길어지게 된다면, 반드시 JSX multi-line 표현식인 ()괄호를 써주자.
처음엔 이상해 보이겠지만 어쩔 수 없다. 적응하는 수 밖엔...

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)

 

중첩 표현식은 다른 표현식처럼 변수로 쓰거나 함수에 들어갈 수도 있다! wow 놀랍쥬?

const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );

 

---

 

JSX의 외부 요소 Outer Elements

JSX에는 규칙이 하나 있는데 단 하나의 바깥 요소만 있어야 한다는 것이다.
이게 뭔 말인가 하면 예시를 봐 보자.

 

const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

✅  위의 코드는 잘 동작한다.

 

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

❌  하지만 이 코드는 동작하지 않는다.

 

---

 

JSX 렌더링Rendering

렌더링을 한다는 뜻은 스크린에 나타나게 한다는 것이다.

 

import React from 'react';
import ReactDOM from 'react-dom';

// 아래 코드로 인해 렌더링이 된다.
ReactDOM.render(<h1>Hello world</h1>, 
document.getElementById('app'));

 

ReactDOM.render() ?

앞선 렌더링에서 우리는 ReactDOM.render()라는 표현식을 적었는데 이게 뭘까?
ReactDOM은 JavaScript의 라이브러리 이름이다.

이 라이브러리에는 여러가지 React 메서드가 포함되어 있으며, 각자의 방법대로 DOM을 처리한다.

ReactDOM.render()에 따르면 render() 부분은 ReactDOM의 메서드 중 하나인 것을 알 수 있다.
ReactoDOM.render는 JSX를 렌더하는 가장 대중적인 방법으로,

JSX 표현식을 받아서 DOM node에 해당 트리를 만들고 DOM에 추가한다.

이것이 바로 JSX 표현식에 화면이 출력되는 프로세스이다!