📘 React 공부하기 | React 준비운동, ES6 & JSX

 

 

React 

 

리액트 공식 홈페이지에 들어가면 리액트는 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리' 라고 나와있다. 

 

웹페이지를 만드는 방법은 크게 두 가지로 나눌 수 있다.

1. html, css 파일을 만들고 javascript로 동적인 액션을 넣어서 만드는 방법

2. vue, react, angular 같은 라이브러리를 사용해서 만드는 방법이다. 

 

자바스크립트 라이브러리 사용하기

웹페이지를 만들고 사용자들과 상호작용을 하게 되면서 많은 상태 관리가 필요하게 된다.

만약, 사용자가 프로필 관리에서 프로필 사진을 바꾼다고 하자. 그럼 아래와 같은 과정이 일어날 것이다. 

 

1. 바꿀 이미지 DOM을 찾는다. 

2. 이미지 DOM의 소스를 새로운 이미지로 바꿔준다. 

3. 바뀐 이미지를 화면에 다시 렌더링해준다. 

 

이렇게 버튼을 하나를 눌렀을 때, 프로필의 상태가 바뀌게 된다. 물론 유저가 여러명이 아니라면 html, css만을 가지고 DOM을 직접 조작할 수 있을 것이다. 하지만 관리해야 할 상태가 하나만이 아니라면, 또 유저가 많아진다면 html,css만을 가지고 상태관리를 하는데는 한계가 올 것이다. 

 

이렇게 복잡한 DOM 관리와 상태 관리를 쉽게 할 수 있게 도와주기 위해 나온 것이 vue, react, angular 같은 자바스크립트 라이브러리이다. 

 

React의 장점 

React 를 배우면 나중에 React-Native로 앱을 개발할 수 있다는 장점이 있다. 리액트 하나로 웹과 앱 두가지를 만들 수 있다. 

 

 

 

1. Component 

 

리액트는 컴포넌트라는 것에 집중하고 있는 라이브러리이다. 컴포넌트는 하나의 의미를 가진 독립적인 코드이다. 

div, li 와 같은 태그들을 하나의 컴포넌트로 볼 수 있다. 

 

예를 들어 아래와 같은 html 코드가 있다.  

  <div class="tweet">
    <span class="userId">@wow</span>
    <div class="contents">hello, my name is wow </div>
    <div class="time"> 10 seconds ago </div>
  </div>

위의 코드를 react를 사용한다면 아래와 같이 사용할 수 있다.

<Tweet userId="wow" time="43">
  hello, my name is wow
</Tweet>

여기서 <Tweet> 이라는 html 태그는 존재하지 않는다. 하지만 Tweet이라는 태그를 만들어 사용할 수 있다. 그리고 이 <Tweet> 이 하나의 컴포넌트가 되는 것이다. 

 

두 코드를 비교하면, 확실히 아래의 코드가 직관적인 것을 볼 수 있다. 그리고 <Tweet>이라는 컴포넌트를 계속 재사용할 수 있기 때문에 재사용성도 굉장히 높다.  

 

리액트에서는 이렇게 컴포넌트 단위로 개발을 진행한다. 

 

 

2. ES6 

 

리액트는 기본적으로 ES6 문법을 사용하고 있다. 

import React, {component} from "react"

class HelloWorld extends Component{
  constructor(props){
    super(props)
    
    this.state = {...}
  }
  
  render(){
    return (
      <div>
       <h1> hello, React </h1>
      </div>
    )
  }
}

 

그렇기 때문에 반드시 알아야 하는 ES6에 추가된 7가지 기능이 있다.

 

 

Destructuring (구조 분해 할당)

구조 분해 할당 구문은 배열이나 객체의 속성을 펼쳐서 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. 

 

배열에서 구조 분해 할당을 사용할 때에는 이렇게 간단하게 여러개의 변수를 할당할 수 있다. 

let [a, b] = [10, 20];

a,b 에 순서대로 10, 20 이라는 숫자가 할당되게 된다. 

객체에서 구조 분해 할당을 사용할 때에는 객체 안의 키이름으로 변수를 할당할 수 있다. 

let obj = {p:42, q:true};
let {p, q} = obj;

console.log(p); //42
console.log(q); //true

 

Spread operator(전개 구문)

Spread 연산자는 ...을 사용하는 전개 구문이다. Spread 연산자는 코드를 보면서 이해를 해야한다. 

let numbers = [1,2,3];

console.log(Math.max(numbers));

numbers라는 배열에서 가장 큰 수를 찾고 싶다. 하지만 Math.max는 인자값으로 숫자 타입만 받기 때문에 에러를 낸다. 

 

NaN : 배열은 숫자가 아니기 때문에

 

여기서 Spread 연산자를 사용해서 해결할 수 있다.

let numbers = [1,2,3];
console.log(Math.max(...numbers));

배열 앞에 Spread 연산자를 사용하게 되면 Math.max의 인자값으로 배열이 아닌 1,2,3 숫자가 들어가게 된다. 

 

Rest parameters

Rest 파라미터는 함수에서 인자값을 받을 때 사용할 수 있다. 몇 개의 인자가 들어올지 모르는 상황이라면 이 파리미터를 사용해서 해결할 수 있다. 

function sum(...numbers){
  return numbers.reduce((acc, cur) => {
    return acc + cur;
  })
}

 

Rest 파리미터를 사용하면 인수가 배열로 나타나게 된다. 

 

 

 

 

default parameter (Default 파라미터)

defualt parameter는 기본값 매개변수이다. 매개변수의 기본값을 정해줄 수 있다. 

function sum(a, b = 1){
  return a + b
}

console.log(sum(5,2)); //7

console.log(sum(5)); //6

처음 default parameter를 이해하지 못했을 때는 왜 이게 필요한지 몰랐다. 그냥 ' return a + b 를 ,  return a + 1 로 수정하면 되지 않을까' 라고 생각했었다. 하지만 default parameter는 매개변수의 기본값을 제공해준다. 기본값!!

 

만약 매개변수 b에 인자값이 들어온다면 b의 값이 2로 바뀌게 된다. 하지만 console.log(sum(5))처럼 b가 undefined가 될 경우에는 기본값이 인자값이 된다. (b = 5) 

 

 

 

arrow function

화살표 함수는 기존 함수를 아래와 같이 쓸 수 있다. 

const numbers = [1,2,3,4];

console.log(number.reduce((acc, cur) => acc + cur)); //10

function 표현에 배해 구문이 짧고, 항상 익명 함수라는 특징이 있다. 이 함수는 콜백함수를 적을 때 적합하다. 

 

 

for-of loop

for...of 문은 반복가능한 객체에 대해서 반복문을 돌릴 수 있다. for..in문에 {...}를 돌 수 있다면, for...of문은 [...]을 돌 수 있다. 

let arr = ['a','b','c'];

for (let value of arr){
  console.log(value);
}

//"a"
//"b"
//"c"

 

 

3. JSX (자바스크립트의 확장 문법)

JSX는 우리가 작성한 리액트 코드를 화면에 렌더링하기 위해 사용하는 문법이다. 반드시 컴포넌트에서는 JSX를 return 해주어야한다. 

import React, {component} from "react"

class HelloWorld extends Component{
  constructor(props){
    super(props)
    
    this.state = {...}
  }
  
  render(){
    return (
      <div>
       <h1> hello, React </h1>
      </div>
    )
    //-> JSX
  }
}

html 태그처럼 보일 수 있지만, JSX는 자바스크립트의 확장 문법으로 html 태그와는 다르다.

 

그럼 JSX문법이 필요한 이유는 무엇일까? 만약 JSX문법을 사용하지 않는다면 아래와 같이 코드를 작성해야한다.

React.createElement("div", {className : 'name'}...);
React.createElement("p",{className : "content"}...);

JSX문법이랑 비교했을 때, 훨씬 복잡하고 가독성이 떨어지는 것을 확인할 수 있다. div, h1태그를 사용하기 위해서는 createElement로 매번 태그를 만들어 줘야하는 것이다. 

 

그래서 JSX문법을 사용하면 훨씬 코드의 복잡도가 낮아지고, 가독성이 올라간다. JSX코드를 쓰면 babel이라는 것이 JSX코드를 React.createElement로 변환을 해준다. 

 

 

 

주의사항도 몇가지 있다. 

 

 

1. 반드시 하나의 엘리먼트가 겉을 감싸고 있어야한다. 

//잘못된 코드 xxx
<div>
  <h1>hello</h1>
</div>

<div>
  <h1>hello</h1>
</div>

<div>
  <div>
    <h1>hello</h1>
  </div>

  <div>
    <h1>hello</h1>
  </div>
</div>

태그 전체를 하나의 <div> 태그로 감싸주고 있다. -> 0

 

 

2. JSX에서 자바스크립트 코드를 적용할 땐 { }안에 작성해야한다. 

import React, {component} from "react"

class HelloWorld extends Component{
  constructor(props){
    super(props)
    
    this.state = {...}
  }
  
  render(){
    const name = "wow";
    return (
      <div>
       <h1>{name}!</h1>
      </div>
    )
  }
}

name이라는 변수를 {name}로 불러와서 사용하고 있다. 

 

 

3. JSX 내부에서는 if 문을 사용할 수 없다. IIFE(즉시 실행 함수) or 삼항연산자를 사용해야한다.

<div>
  {
    (1 + 1 === 2) ? (<h1> 정답 </h1>) : (<h1> 탈락 </h1>)
  }
</div>

 

4. 엘리먼트의 클래스 이름을 지정할 때, class 가 아닌 className 을 사용하여야한다. 

<div>
  <div className="hello">
    <h1>hello</h1>
  </div>
</div>