분류 Reactjs

React강좌 - 4 - React 전제 조건 및 4 가지 ES6 알아 두어야 할 것들 I

컨텐츠 정보

  • 조회 344 (작성일 )

본문

JavaScript는 지난 10 년 동안, 특히 ES6 업데이트를 통해 먼 길을 왔습니다.


JavaScript의 표준화 된 이름은 ECMA Script이며 이 버전은 2015 년에 나왔습니다. 버전 6에서는 ES2015 또는 ES6으로 명명되었습니다.


React 어플리케이션을 구축 할 때 ES6에 대한 지식이 중요합니다. ES6은 자바스크립트 작성을 훨씬 쉽게 해주는 JavaScript에 대한 멋진 구문 변경을 많이 가져 왔습니다.


Terminal 


React CLI (create-react-app)를 사용하려면 명령 행을 배우는 것이 좋습니다. 이것이 Create-Reaction-App으로 애플리케이션을 시작하고 프로젝트에서 개발을 시작하는 방법입니다.


알아 두어야 할 주요 명령은 다음과 같습니다.

  • ls : 현재 폴더의 모든 것을 나열합니다.
  • cd <name> : 들어갈 폴더를 선택하십시오.
  • mkdir <name> : 폴더 만들기


4 가지 주요 ES6 기능 


ES6 (2015 년 JavaScript의 주요 업데이트)에는 많은 구문 업데이트가 포함되어 있지만 React에서 많이 사용되는 4 가지 기본 구문 업데이트가 있습니다.


1. var에 let과 const를 추가합니다. 


지금까지 var를 사용하여 JavaScript에서 변수를 선언했습니다. ES6에서는 const 및 let을 사용하여 변수를 선언하는 두 가지 새로운 방법을 소개했습니다. 주요 차이점은 다음과 같습니다.

  • const :이 변수는 재 할당할 수 없습니다. 새 값을 다시 할당하려고 하면 JavaScript에서 오류가 발생합니다.
  • let :이 변수는 재 할당 할 수 있습니다. 이것은 var와 비슷합니다.

왜 이 문제가 중요할까요? const는 변수가 일정하게 유지되어야 한다는 것을 빠르게 볼 수 있게 합니다. 그것은 재 할당되지 않을 것입니다. 우리가 let은 이 값을 바꿀 것이라는 것을 알려줍니다. let 변수가 var보다 무엇을 하는지 조금 더 알려줍니다.


var 대신 const 또는 let 사용 


// es5
var message = 'hello there!';

// es6
const message = 'hello there!';

// error if we try to reassign message
message = 'my new message'; // <- ERROR

2. 화살표 함수 (=>) 


Arrow 함수는 대부분의 JavaScript를 볼 수 있으므로 익숙해지는 것이 좋습니다. 화살표 함수는 한 줄짜리 구문을 작성할 수 있는 것 외에도 함수의 어휘 범위를 변경할 수 있습니다. 우리는 이 시동기에서 스코프를 너무 많이 걱정할 필요가 없습니다.


// es5
function sayHello() {
  return 'i am saying hello';
}

// es6 explicit return (same as above)
const sayHello = () => {
  return 'i am saying hello';
}

// es6 implicit return 1-liner (same as above)
const sayHello = () => 'i am saying hello';

다음은 함수 인수가 있는 또 다른 예제입니다.


// es5
function add(a, b) {
  return a +_ b;
}

// es6
const add = (a, b) => a +_ b;

Arrow 함수를 사용하면 코드를 한 줄로 단순화 할 수 있으며 발생하는 React 코드에서 이 코드를 많이 볼 수 있습니다. 다음은 화살표 기능을 사용하거나 사용하지 않은 상태로 작성된 React 함수의 예입니다.


// function
function App() {
  return (
    <div>my app goes here</div>
  );
}

// es6
const App = () => (
  <div>my app goes here</div>
)

여기에 있는 두 예제는 동일하지만 ES6 화살표 함수를 사용하여 좀 더 깔끔한 코드를 얻을 수 있습니다.


참고 : 함수 및 화살표 함수는 모두 유효하며 코드 전체에서 사용할 수 있습니다. 각 시나리오에 대해 어느 것이 더 나은지 판단하는 것은 사용자의 몫입니다. 자신 만의 규칙을 고수하여 코드 전체에서 일관성을 유지하십시오.


3. Classes 


ES6는 JavaScript 클래스를 가져 왔습니다. 클래스는 자바 스크립트의 문법적 설탕일 뿐입니다. 후드에서 클래스는 단순한 오래된 함수입니다. React Code는 처음부터 끝까지 많은 클래스를 가지고 있지만, 우리의 초보자 가이드는 함수를 직접 사용하게 될 것입니다.


보이는 React 코드가 클래스를 사용할 수 있다는 사실을 알고 있으면 좋습니다. React 16.8은 React 함수을 가진 React Hooks를 React 클래스 컴포넌트와 동일한 툴로 만들었습니다. 그래서 우리는 함수형 컴포넌트를 고수 할 것입니다.


상태(State)와 구성 요소(Component) 비교 


다음은 함수 및 클래스에서 React state를 사용하는 구성 요소(component)의 예입니다.


// class
class App extends React.Component {
  state = { message: 'my message' };

  updateMessage = message => this.setState({ message });

  render() {
    const { message } = this.state;

    return (
      <div>my message is: {message}</div>
    );
  }
}

다음은 함수와 React Hooks의 예제입니다.


function App() {
  const [message, setMessage] = React.useState('my message');

  return (
    <div>my message is: {message}</div>
  );
}

함수형 React 구성 요소가 useState와 같은 React Hooks를 얼마나 많이 사용하고 있는지 확인하십시오. 초보자 가이드에서는 React functional components와 React Hooks를 계속 사용하겠습니다.


4. Destructuring 


파괴는 React에서 매우 자주 사용됩니다. 객체 파괴 및 배열 소멸은 JavaScript 코드를 단순화하는 매우 쉬운 방법입니다.


Destructuring을 사용하면 여러 개의 지루한 줄을 한 줄로 단순화 할 수 있습니다. 


Object Destructuring 


우선 객체 파괴를 다루겠습니다. ES6을 사용하면 자바 스크립트를 여러 파일로 분할 한 다음 필요한 것을 import할 수 있습니다. 예를 들어, ES6 사용시 React를 가져 오려면 import React from '``react``' 하면 됩니다. 이 import 문은 객체의 대부분이 파괴되는 곳입니다.


다음은 객체 파괴의 간단한 예입니다.


// create an object
const person = {
  name: 'chris',
  username: 'chrisoncode'
};

// you could get name like this:
let name = person.name;
let username = person.username;

// or you could get name with destructuring
let { name, username } = person;

React에서 객체 파괴를 살펴 보겠습니다. 다음은 동일한 것을 작성하는 두 가지 방법입니다.


// no destructuring
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>hello</h1>, document.getElementById('root'));

이제 배열 소멸을 통해 render 메소드를 객체 밖으로 직접 가져올 수 있습니다.


// with destructuring
import { render } from 'react-dom';

render(<h1>hello</h1>, document.getElementById('root'));

객체 파괴는 객체에서 객체를 끌어내는 더 빠른 방법일 뿐입니다. 


Array Destructuring 


배열 소멸은 객체의 소멸과 비슷하지만 배열에서 값을 꺼내는 것을 제외하고는 마찬가지입니다. 다음은 간단한 예입니다.


// create an array
const people = ['chris', 'holly'];

// grab without destructuring
let chris = people[0];
let holly = people[1];

// grab with destructuring
let [chris, holly] = people;

배열 소멸은 배열을 가져 와서 배열에 나타나는 순서대로 하나씩 데이터를 꺼내는 방법입니다. 


우리는 이미 useState를 사용할 때 React에서 배열 소멸이 사용 된 곳을 보았습니다.


const [message, setMessage] = React.useState('');



ES6