props

시작은 역시 hello 로 진행.

App.js

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

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

페이지 상단에서 Hello 컴포넌트를 import 하고 하단 function 블럭에서 해당 컴포넌트를 리턴하고 있음. 당연히 정확한 경로에 다음 컴포넌트 작성 필요.

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

App.js 에서 Hello 컴포넌트를 호출할 때 name=react 를 정의하였으므로, 해당 값을 컴포넌트에서 사용할 수 있게 돕는 것이 바로 props 임.

여러개를 해야하는데...

App.js

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

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

컴포넌트에 호출 시에 color 값을 추가 한다면

Hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

이렇게 색정보도 받아서 적용하면 됨. 여기서 props.color, props.name 이렇게 작성하는 것 보다는 비구조화 할당을 이용해서 { color, name } = props 이므로 다음과 같이 하면됨.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

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;

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

1. 필요사항

1) ES6 문법 2) Tool 설치 3) Mental ... 끝.

2. 작업환경 준비

Node.js

Window 버전은 nodejs.org 에서 다운로드 하면됨.

MacOs 는 nvm 으로 설치하면됨.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
$ nvm install --lts

Yarn

yarn 공식페이지 yarn install 참고하면됨.

VS Code

vs code VS Code 공식 홈페이지 참고하면됨.

3. 시작

VS Code 에서 Terminal > New Terminal (Ctrl + Shift + `) 터미널 실행.

$ npx create-react-app start-app

CLI 로 start-app 생성. 생성한 start-app 디렉터리에 들어가서 yarn start 입력.

$ cd start-app
$ yarn start

잠시 기다리면 http://localhost:3000/ 으로 페이지가 열림.

우선 여기까지 작업준비 끝.