React 소개 및 JavaScript 문법

React 소개 및 JavaScript 문법

---

📌 UI를 Building한다?

Web 또는 App Application의 UI, 즉, 보여주는 부분(Front End)을 구축한다.

 

📌 React.js란?

• SPA 기반의 프론트엔드 개발 프레임워크
• 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법
• 비슷한 프레임 워크 : AngulaJS, VueJS

 

📌 SPA란?

Single Page Application

한개의 페이지(index.html)로 이루어진 애플리케이션

컴포넌트(벽돌) 단위로 변경사항을 반영하기 때문에 깜빡임 없음

↔ MPA(Multi Page Application) : 하나의 변경사항을 반영하기 위해 전체 페이지 re-rendering 하므로 깜빡임 현상(UX, 사용자 경험 ↓)

 

📌 React의 단점

SEO(Search Engine Organization)가 너무 너무 약하다. → Next.js 가 이러한 문제를 보완

MPA는 검색 엔진이 찾을 수 있지만, SPA는 검색 엔진이 찾을 수 없다.

 

---

기본 문법

 

✏️ 상수와 변수

// 상수 : const(constant : 변함없는 수)
// 변수 : let

const a = 1;
let b = 3;

a = 3; // TypeError: Assignment to constant variable.
b = 1;

console.log('a', a);
console.log('b', b);

const, let은 block level scope를 가짐

 

하지만, var는 block level scope X

if (true) {
  var a = 1;
}

console.log(a);

var는 되도록 사용하지 않는게 좋음.

 

 

✏️ Object

key - value

// javascript에서 말하는 Object
// key - value pair

const name = '르탄';
const age = 21;

const testObj = {
    name,
    age,
    company : 'Team Sparta',
    doSomething : () => {}, //function() {}
}

 

복사 주의! (얕은 복사)

const obj1 = {
    value1:10,
};

const obj2 = obj1;
obj2.value1 += 1

// 만약에 복사한 obj2를 바꾼다면 어떻게 될까?
// 예상 : obj2만 바뀜.
// 실제 : obj1도 함께 바뀌어 버림...?!?!
// 왜? obj1 은 { value1: 10 } 이라는 객체를 가리키고 있는 주소값이 저장되어 있음
// obj2 = obj1 하면, 이 또한 { value1: 10 } 이라는 객체를 가리키고 있는 주소값이 저장.
// 결국 obj1과 obj2 모두 { value1: 10 } 이라는 객체를 가리키고 작업함.

console.log('obj1', obj1); // obj1 { value1: 11 }
console.log('obj2', obj2); // obj2 { value1: 11 }

 

새로운 주소값에 객체 할당하는 방식으로 복사해야함.

const obj1 = {
    value1:10,
};

const obj2 = obj1;
const obj3 = JSON.parse(JSON.stringify(obj1)); // 새로운 주소값에 obj1을 문자열로 풀어서준뒤 다시 객체형태로 묶어서 parsing
obj3.value1 += 1

console.log('obj1', obj1); // obj1 { value1: 10 }
console.log('obj2', obj2); // obj2 { value1: 10 }
console.log('obj3', obj3); // obj3 { value1: 11 }

 

✏️ Template Literals

${ } : place holder

const testValue = "제어하는 값";

console.log(`문자열 ${testValue} 입니다.`); // 백터

 

✏️ Multi Line

const testValue =  `
    동해물과 백두산이 마르고 닳도록
    하느님이 보우하사 우리 나라 만세
    무궁화 삼천리 화려강산
    대한사람 대한으로 길이 보전하세
`;

 

✏️ 배열 / 객체 비구조화(Destructuring)

구조분해 할당

 

객체

// De(out, 반대) + structur + ing

const person = {
	name: '르탄',
	age: '21'
}

const {name, age, notFound} = person;

console.log('name', name); // name 르탄
console.log('age', age); // age 21
console.log('notFound', notFound); // notFound undefined

 

배열

const testArr = [1, 2, 3, 4, 5];

const [one, two, three] = testArr;

console.log('one', one); // one 1
console.log('two', two); // two 2
console.log('three', three); // three 3

 

 

✏️ 전개 연산자(...)

Spread Operator

let [name, ...rest] = ["wonjang", 21, "Gyeongi"];

console.log('name', name); // name wonjang
console.log('rest', rest); // rest [ 21, 'Gyeongi' ]

 

let names = ["Steve", "John"];
let students = ["Tom", ...names, ...names]; // 배열의 구조를 깨고 나와줘!

console.log("students", students) // students [ 'Tom', 'Steve', 'John', 'Steve', 'John' ]

 

✏️ 화살표 함수

Arrow Functions

 

function

function mysum1(x, y) {
    return x + y;
}

console.log(mysum1(1,2)); // 3

 

Allow function

function mysum1(x, y) {
    return x + y;
}

const mysum2 = (x, y) => {
    return x + y;
}

const mysum3 = (x, y) => x + y; // 중괄호를 빼줄땐, return문이 없어야 한다.


console.log(mysum1(1,2)); // 3
console.log(mysum2(1,2)); // 3