Skip to content

Latest commit

 

History

History
145 lines (98 loc) · 6.28 KB

chapter02.md

File metadata and controls

145 lines (98 loc) · 6.28 KB

2장. JSX

코드 이해

import React, { Component } from 'react';
  • Node.js 의 주요 특징은 코드를 모듈화하여 재사용할 수 있다는 점이다.
  • 이렇게 모듈들을 js 파일에서 불러와 사용할 수 있는데, 이때 사용하는 코드는 아래와 같다.
var fs = require('fs');
  • ES6 (ECMAScript6) 에서는 모듈을 불러오는 새로운 키워드가 생겼다. 바로 import 이다.
  • import를 키워드를 사용하여 모듈을 불러오는 방법은 아래와 같다.
import fs from 'fs';
  • 위 코드는 아래 이전 자바스크립트 문법과 동일하다.
var React = require('react');
var Component = React.Component;

  • 이렇게 파일을 모듈화해서 사용하는 것은 Node.js의 기능이다.

  • 웹 브라우저에서 사용하는 자바스크립트는 Node.js 런타임으로 실행하는 것이 아니기 때문에 자체적으로 이 기능을 지원하지 않는다.

  • 하지만 이런 특징을 웹 브라우저에서도 비슷하게 사용할 수 있는 방법이 바로 번들링(bundling) 도구를 이용하는 것이다.

  • 여기서 번들(bundle)은 '묶는다'는 뜻으로 파일들을 묶듯이 연결하는 것이다.

  • 번들링 도구로는 Browserify, RequireJS, webpack 등이 대표적이다.

  • 이런 번들링 도구를 사용하면, require (또는 import)로 모듈을 불러왔을 때 번들링되면서 모듈들을 파일 하나로 합쳐준다.

  • 이렇게 파일들을 불러오는 것은 webpack의 로더(loader)가 담당한다.

  • babel-loader는 js 파일들을 불러오면서 ES6로 작성된 코드를 ES5 문법으로 변환해준다.

class App extends Component
  • 위 코드는 App이라는 클래스를 선언한다.
  • 이 클래스는 리액트 라이브러리 내부에 있는 Component 클래스를 상속한다.

ES6의 클래스(class) 문법

class Dog {
    constructor(name) {
        this.name = name;
    }
    say() {
        console.log(this.name + ': 멍멍');
    }
}

const dog = new Dog('흰둥이');
dog.say();
  • render() 함수 : 이 함수 내부에서는 컴포넌트를 유저에게 어떻게 보일지 return 한다.

JSX

  • JSX: 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다.

  • 이런 형식으로 작성한 코드는 나중에 코드가 번들링되면서 bable-loader를 사용하여 자바스크립트로 변환된다.

  • JSX 장점

    • HTML 코드를 작성하는 것과 비슷하다.
    • 오류 검사: JSX에 오류가 있다면 바벨이 코드를 변환하는 과정에서 이를 감지한다. (ex: 태그를 닫지 않았을 때)
    • JSX에서는 우리가 알고 있는 div나 span 같은 HTML 태그를 사용할 수 있다.
    • 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다.

JSX 문법

  • JSX는 정말 편리한 문법이지만, 올바르게 사용하려면 몇 가지 규칙을 준수해야 한다.

  • 감싸인 요소

    • 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야한다.
    • 그것은 Virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있기 때문이다.

  • Fragment

    • 리액트 v16 이상에서는 Fragment 컴포넌트가 도입되었다.
    • div 같은 것으로 감싸지 않고 여러 요소를 렌더링하고 싶다면 리액트를 불러올 때 Component와 함께 Fragment를 불러와서 사용한다.

  • 자바스크립트 표현

    • JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.
    • 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {} 로 감싸면 된다.

ES6의 const와 let

  • const: ES6 문법에서 새로 도입한 것으로 한번 지정하고나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드.

  • let: 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드.

  • var: ES6 이전에는 값을 담는데 var 키워드를 사용. var 키워드는 scope(해당 값을 사용할 수 있는 코드 영역)가 함수 단위

  • let과 const는 scope가 함수 단위가 아닌 블록 단위이므로 if문 내부에서 선언한 a값은 if문 밖의 a값을 변경하지 않는다.

  • let과 const를 사용할 때는 같은 블록 내부에서 중복 선언이 불가능하다.

  • const는 한번 선언하면 재설정할 수 없다.

  • let은 한번 선언한 후 값이 유동적으로 변할 수 있을 때만(예:for문) 사용하고, const는 한번 설정한 후 변할 일이 없는 값에 사용한다.

if문 대신 조건부 연산자

  • 조건에 따라 다른 것을 렌더링해야할 때는 JSX 밖에서 if문을 사용하여 작업하거나, {} 안에 조건부 (삼항) 연산자를 사용하면 된다.

&&를 사용한 조건부 렌더링

  • 특정 조건을 만족할 때와 만족하지 않을 때, 다른 결과를 보여주어야할 떄는 삼항 연산자를 쓴다.
  • 특정 조건을 만족할 때는 보여주고, 만족하지 않을 떄는 보여주고 싶지 않다면 아래와 같이 쓴다.
{ condition ? '보여주세요' : null }
  • JSX에서는 null 값 외에도 false 값을 렌더링하면 아무것도 나타나지 않는다. 따라서 이때는 삼항 연산자를 쓰는 대신 && 연산자로 조건부 렌더링을 할 수 있다.
{ condtion && '보여주세요' }

인라인 스타일링

  • 리액트에서 DOM 요소에 스타일을 적용할 때는 CSS 스타일을 자바스크립트 객체 형식으로 만들어서 적용해야한다.
  • key는 camelCase로 작성한다.
  • 자바스크립트의 객체 key에서는 '-'을 사용할 수 없으므로 background-color는 backgroundColor로 바꾸어서 작성한다.

class 대신 className

  • 리액트에서 class를 설정할 떄는 class 키워드 대신 className으로 설정해야 한다.

꼭 닫아야 하는 태그

  • HTML 코드를 작성할 때 가끔 태그를 닫지 않을 때도 있다.
  • 하지만 JSX에서 이렇게 작성하면, Virtual DOM에서 트리 형태의 구조를 만들지 못하기 때문에 오류가 발생한다.
  • JSX에서는 언제나 코드를 닫아주어야 한다.

주석

  • 일반적으로 주석을 작성할 때는 { /* 이런 형식으로 */ } 쓴다.