react공부를 하기 전에 기초적인 개념만 몇가지 정리하고 가자.
SPA
Single Page Application의 약자로 동적인 콘텐츠를 넣는 개념이다.
위 그림을 보면 쉽게 이해할 수 있는데, 한개 페이지에서 일부분만 필요에 의해서 content를 로딩하는 방식으로 페이지를 구성하는 것이다.
여러개의 html 파일을 보관하고 있는것은 낭비에 가깝기 때문에 이런 방식으로 구성하면 편리하다. 이런식으로 <body>컨텐츠를 동적으로 넣어주는 방식으로 작동한다.
CSS
Cascading Style Sheets의 약자로 디자인을 입혀주는 역할을 하는 언어이다.
html 코드는 동일해도 디자인이 다를 수 있다. 이런식으로 디자인을 다르게 해주는게 CSS이다.
Javascript
ECMAScript가 정식명칭이며, 동적으로 살아 움직이도록 해주는 언어이다. 동적타이핑방식을 쓰기 때문에, let을 사용해서 변수를 선언해주고, 대입연산자로 자료를 넣어주면, data를 저장할 수 있다.
자스의 배열에는 다양한 자료형들을 동시에 집어넣을 수 있다.
자바스크립트에서 나오는 객체는 다른 객체지향언어와는 다르다. 자바스크립트에서의 객체는 key와 value가 쌍으로 들어가는 자료형을 말한다.
호출하는 방식은 아래와 같다.
let object = {a:"hello", b:100, c : [1,2,3,4,], d: {c:c1, d:d2}};
//객체 선언
console.log(object["a"]);
//출력결과: hello
console.log(object.c);
//출력결과: [1,2,3,4]
console.log(object.d.c);
//출력결과: c1Javascript의 연산자
증감연산자의 두 방식
- Postfix: 이 방식으로 변수의 뒤에 증감연산자를 쓰게 되면, 증감연산자로 값을 변환시키기 전에 먼저 기본값을 반환하고, 증감을 적용한다.
- Prefix: 이 방식은 Post와 정 반대로 작동한다. 먼저 증감연산자가 작동을 하고 값이 변한 뒤에 값이 반환된다.
let a = 1;
let b = a++;
console.log(a,b);
//출력결과: 2, 1
let c = 2;
let d = ++c;
console.log(c,d);
//출력결과: 2, 3동등 연산자 / 일치 연산자
- 동등 연산자는
a == b,a != b이렇게 사용한다. 자료형이 달라도 값이 같으면 true로 나온다. - 일치 연산자는
a === b,a !== b이렇게 사용한다. Strict equality operators라고 말하는데 엄격하게 자료형까지 동일한지 확인하는 것이다.
평범하게 숫자 1과 문자 '1'을 비교하면 동등 연산자로는 같다고 나오지만, 일치 연산자를 사용하면 다르다고 나온다.
Javascript의 함수
- function statement를 사용하는 방식
function sum(a, b) {
return a+b ;
}- arrow function statement 방식
const multiply = (a, b) => {
return a * b;
}위와 같이 두 가지 방식이 있다. 자료형을 신경써가면서 비교해야 하는 경우에는
여기까지 자바스크립트에서 가지는 조금 특별한 문법들만 몇개 정리해봤다. 언어에 대해서도 더 공부가 필요하기는 하나 우선 리액트를 익혀가면서 부족한 부분을 채워가보도록 하자.
대표적으로 많이 사용하는 게 React와 vue.js 인데, React는 라이브러리 이며 vue.js는 프레임워크이다.
라이브러리 vs. 프레임워크?
프로그램의 흐름에 대한 제어권한 차이점에서 부르는 차이가 온다. 프레임워크는 제어권한이 프레임워크 자신에게 있으며, 라이브러리는 개발자에게 그런 권한이 있다고 말할 수 있겠다.
React의 장점?
-
Virtual DOM : 하나의 웹사이트에 대한 모든 정보를 담고있는 Document Object Module 이다. 빠르게 렌더링이 된다는 장점이 있다. 상태가 변경이 일어나면, Virtual DOM에서는 업데이트된 내용 일부분만을 찾아서 업데이트를 해서 매우 빠르다.
-
Componenet-Based : 레고 블록 조립하듯이 컴포넌트들을 모아서 조립하는 방식으로 개발이 가능하다는 장점이 있다.
-
Reusability : 재사용성이 좋다. 모듈을 재사용해서 개발할 수 있어서 개발이 빠르고 유지보수가 매우 용이하다.
JSX?
A syntax extension to JavaScript 이다. 자바스크립트의 문법을 확장한 것이라고 보면된다. JavaScript + XML/HTML 의 형태라고 보면 된다.
const element = <h1>Hello, World!</h1>위의 코드를 보면 굉장히 어이없어 보이지만, JSX에서는 가능하다. 근데 왜 이게 필요한가? JSX로 작성해도 결국에는 자바스크립트로 작성되는데, 이 역할을 해주는게 React.CreateElement()로 자바스크립트로 바꿔준다. 그렇다면 왜 이게 필요하고 이 함수로는 어떤 Element가 들어가야 하는가? Element의 첫번째 파라미터는 Type이 들어가고, 두번째로는 [props] -속성들, 세번째로는 [children] 자식 element 이 들어간다. 모든 경우에는 그냥 자바스크립트로도 작성 가능하지만, JSX를 쓰면 조금더 손쉽게 가능하다.
장점을 정리하면
- 간결한 코드/ 좋은 가독성
- Injection Attacks 방어 (입력창에 일반적인 문자나 숫자를 넣는게 아니라 코드를 집어넣어서 실행되게 만드는 해킹방식을 방어)
사용방법은?
위의 그림처럼 XML/HTML + {Javascripts} + XML/HTML 꼴로 만들면된다.
