요약
- React가 무엇인지 알 수 있다.
- React에서 자주 사용되는 필수 ES6 문법을 습득하여 React를 준비할 수 있다.
- CRA의 개념을 알고 절대경로를 지정할 수 있다.
React란
공식문서: A JavaScript library for building user interfaces
- SPA(Single Page Application) 기반의 프론트엔드 개발 프레임워크 중 하나
- 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용
- 비슷한 프레임워크인 AngularJS, VueJS보다 월등히 인기가 많다.
React의 특징 및 장점
- Single Page
- 서버에 1회의 리소스를 요청함 -> index.html
- 데이터만 가져와서 '수정'하는 방식으로 구현
- 깜빡임이 없어(렌더링) 자연스러운 UX를 구현할 수 있다.
React의 단점
- SEO(Search Engine Organization)에서는 약하다.
- SEO을 위해서는 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일들이 너무 간략해서 검색엔진이 찾을 수 없다.
SPA 프레임워크의 종류
- ReactJS
a. 페이스북이 만들고 유지보수
b. 선발주자 -> 많은 커뮤니티와 자료 보유 - VueJS
a. 쉽고 단순하여 꾸준히 성장하는 중
b. 후발주자 -> 시장이 좁다 - AngularJS
a. 안정적인 프레임워크
b. 어렵고 무서워서 나온지는 오래 됐으나 점유율은 낮음
컴포넌트(Component) = 벽돌
- 헤더(Header) 컴포넌트, 바디(Body) 컴포넌트, 푸터(Footer) 컴포넌트를 만들어서 벽돌을 쌓아 올리듯이 개발을 함
- SPA 기반으로 구현 시 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임이 없다.
React에서 자주 사용되는 필수 ES6 문법
상수와 변수
- let: 재할당 O
- const: 재할당 X, 내부 속성값만 수정 가능
Object 선언, 단축 속성, 객체 복사
※ Object는 key-value pair
객체 선언 방법
const person = {
name: 'habin',
age: 20,
company: '~~~',
doSomething: () => {}, // value에는 어떤 것이든 올 수 있다. 그것이 함수일지라도.
}- 밖에서 선언한 같은 key와 value를 가지고 있다면 다음 객체 선언 시 key만 적어도 같은 값으로 나옴.
const name = 'habin';
const age = 20;
const person = {
name,
age,
company: '~~~',
doSomething: function(){},
}얕은 복사 주의!
const obj1 = { value1: 10 };
const obj2 = obj1; // 얕은 복사
const obj3 = JSON.parse(JSON.stringify(obj1))
obj1.value1 += 1;- obj2는 얕은 복사가 일어나서 마지막 value를 바꾸면 obj1와 obj2의 내용물 모두 바뀌게 된다.
- obj3은 JSON을 사용하여 새로운 주소 값을 생성하였기 때문에 내용물이 바뀌지 않는다.
Template Literals
- 백틱을 사용하여 플레이스 홀더를 사용여 변수 값을 넣거나 멀티라인으로 사용 가능하다.
// 일반 텍스트
`string text`
// 멀티라인
`string text line 1
string text line 2`
// 플레이스 홀더를 이용한 표현식
`string text ${expression} string text`배열/객체 구조분해 할당
- 비구조화 (Array/Object Destructuring) 라고도 한다.
객체의 구조분해 할당
const person = {
name: 'habin',
age: '20'
}
function hello({name, age}) {
console.log(`${name}님, ${age}살이시네요!`);
}
hello(person);
// habin님, 20살이시네요!배열의 구조분해 할당
const testArr = [1, 2, 3, 4, 5];
const [val1, val2, val3, val4, val5] = testArr;
console.log(val1);
// [1]전개 연산자 (Spread Operator)
- 전개연산자(...)를 이용하여 배열을 깨서 다른 배열에 하나씩 넣는 것도 가능하다.
let names = ["Steve", "John"];
let students = ["Tom", ...names];
// console.log(students); -> ["Tom", "Steve", "John"]Arrow Functions(화살표 함수)
// 일반 함수
const mysum1 = function (x, y) {
return x + y;
};
// 화살표 함수
const mysum2 = (x, y) => {
return x + y;
};
// 반환값이 한 줄일 경우 return과 {} 함께 생략 가능
const mysum3 = (x, y) => x + y;
// 매개변수가 하나일 경우 ()까지 생략 가능
const mynum = x => x * 2CRA(Create React App)
CRA란
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
- React 프로젝트를 구성하기 위해 필요한 것들이 상당히 많은데 이러한 것들을 신경쓰지 않아도 알아서 세팅을 해준다 -> 보일러플레이트(BoilerPlate)
상대경로(./) import → 절대경로 지정하기
- jsconfig.json 파일을 만들기 ※ 반드시 root 경로에 생성!
- 다음 내용 작성하기 ※ src 폴더 밑에 있는 것들은 모두 절대 경로로 쓰겠다는 것을 말함
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}느낀 점
처음 리액트를 배운다고 했을 때 긴장했는데, 자바스크립트를 리마인드 해서 조금 더 이해하게 되어서 자신감이 생겼다. 순수 자바스크립트로 기능을 구현하다가 리액트에 대한 소개를 들으니 리액트가 굉장히 매력적이라고 느꼈다. 앞으로 열심히 강의 들어야겠다.
