다음으로 넘어가기 전에...

1. 일단 알고가야 할 것

ES6 문법
JSX

2. ES6

화살표 함수

const add = (a, b) => {
  return a + b;
};

console.log(add(1, 2));

function 키워드를 대신해서 화살표 사용
여기에서 또 축약이 있음.
위의 함수는 정확하게 다음과 동일.

const add = (a, b) => a + b;
console.log(add(1, 2));

여러줄로 구성되지 않고 바로 리턴되는 단순 함수이기 때문에 축약할 수 있음.

const add = (a, b) => {
  if(a > 8){
    //some...
    a = 8;
  }
  return a + b;
};

console.log(add(1, 2));

위와 같이 여러줄이면 코드 블록으로 정의해야됨.

비구조화 할당

const object = { a: 1, b: 2 };

//object 안의 a, b 를 출력한다고 한다면...

//일반적으로 변수에 배치...
let a = object.a;
let b = object.b;

//또는 다음과 같이 비구조화 할당 사용..
const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

음... 끝.

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

함수의 파라미터에도 비구조화 할당이 가능.

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);

이렇게도 됨.

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

이렇게도 되고...

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

오브젝트 외에 배열도 가능.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

오브젝트나 배열값이 깊숙한 경우에는 이렇게... 비구조화 할당을 2번 사용해서 추출함.

spread

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime);// {name:'슬라임'}
console.log(cuteSlime);// {name:'슬라임',attribute:'cute'}
console.log(purpleCuteSlime);//{name:'슬라임',attribute:'cute',color:'purple'}

음... 이정도 예제면...

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);//['개', '고양이', '참새']
console.log(anotherAnimals);//['개', '고양이', '참새','비둘기']

배열도 가능.

rest

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...rest } = purpleCuteSlime;
console.log(color);//purple
console.log(rest);//{name:'슬라임',attribute:'cute'}

형태가 ... 으로 비슷해서 헷갈림.
주요한 부분은 const {color, ...rest} 이 부분임.
뒤쪽 변수명이 반드시 rest 이어야 하는 것은 아님.

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one);//0
console.log(rest);//[1,2,3,4,5,6]

역시 배열에서도 사용가능.

JSX

기본규칙

html 과 거의 같다. 몇가지 규칙만 지키면됨.

태그를 반드시 닫을 것.
항상 root 엘리먼트가 있어야 함.

태그 닫기는 당연히 싱글 엘리먼트도 해당 됨.

mport React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <input />
      <br />
    </div>
  );
}

export default App;

최상위 root 엘리먼트는 <> 이렇게 이름없이 작성해도 됨.

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

자바스크립트 값 사용

JSX 내부에 자바스크립트 변수 값을 사용하려면 {} 로 감싸야 됨.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

style, class 적용시

JSX 형식으로 style 적용하려면 camelCase 로 네이밍해야함. background-color 은 backgroundColor 로 작성.

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

css class 를 작성할 땐 class= 대신에 className= 으로 해야됨.

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

일단 여기까지 필요한 기본문법 정리 끝.