React란?

페이스북의 개발자들이 만든 자바스크립트 기반의 프론트엔드 프레임워크라고 보면 쉽다. (하지만 라이브러리이다. Vue.js는 프레임워크이지만, 리액트는 절대 절대 라이브러리이다)

프론트엔드에서도 서버를 띄워서, 관리하는 것이다.

나는 플러터를 프론트엔드로 많이 배웠었는데, 앞으로 공부하다보면 디자인패턴(MVC, MVVM, MVP), 상태관리(플러터로 치면 GetX, BloC, Provider), 단순 디자인(플러터로 치면 cupertino, material) 등이 나오지 않을까 싶다.

앞으로 서서히 공부하면서 많은 것을 배우려고한다.

책은 동물책으로 유명한 오렐리미디어의 러닝 리액트로 공부를 진행하려고 한다.

리액트 설치

https://nodejs.org/en 여기서 Stable한 버전을 설치하고,

터미널에서 npx create-react-app 프로젝트명을 사용해서 프로젝트를 생성한다.

리액트는 node.js 기반으로 만들었기때문에 패키지를 설치해서 리액트 프로젝트를 실행할 수 있다.

자바스크립트

자바스크립트는 ES2015에는 var키워드로 변수를 선언하였지만, ES2016이후에는 아래의 두 가지 변수가 추가되었다.

const

상수이다. 값을 변경하면 오류가 뜬다.

let

자바스크립트도 C, Java, Dart와 유사하게 {} 중괄호 기반으로 코드 블록을 만든다.
변수가 중괄호 안에 있는지 없는지에 따라 사용할 수 있는 영역이 다른데, 이 영역을 scope 라고 한다.

스코프

전역 스코프 : 어느 곳에서든 참조 할 수 있다.
지역 스코프 : 블록 안, 함수 내에서만 참조 할수있다.

전역 변수 : 전역 스코프에서 선언된 변수로 모든 곳에서 참조 된다.
지역 변수 : 지역 스코프에서 선언된 변수로 지역 스코프 내부에서만 참조 된다.

변수	재할당	재선언	유효범위
let	가능	불가	블록 스코프 및 함수 스코프
const	불가	불가	블록 스코프 및 함수 스코프
var	가능	불가	함수 스코프

함수 스코프 : 기존 const와 let이 없었던 시절 var의 개념

if(true) {
	var test = '12345';
}
test // '12345'

여기서 test가 if {} 안에서 선언되었는데, 왜 밖에서 사용이 되는 것일까? 바로 함수안이 아니기 때문이다.

function a() {
	var test = '12345';
}
test; //ReferenceError

함수 안에서 변수를 선언하고 밖에서 사용하려고 하면 이는 참조에러가 뜬다.
이 두개의 차이가 드러나는 특징이 바로 함수 스코프이다.
✔ 블록안에서 선언한 변수는 오직 블록안에서만 접근이 가능하다.

블록 스코프 : const와 let이 탄생하며 생긴 개념

function loop() {
	for(var i = 0; i < 5; i++) {
		console.log(i);
	}
	console.log('final',i);
}
loop();
/*
	0
	1
	2
	3
	4
	final 5
*/

위는 문제없이 작동한다. 왜냐하면 var은 함수 스코프이기 때문에, loop() 함수 안에서는 모두 참조가 가능하다.

function  loop() { 
	for (let i = 0; i < 5; i++) { 
		console.log(i); 
	} 
	console.log('final', i); 
} 
loop(); /* ReferenceError: i is not defined */

하지만 let은 블록 스코프이기 때문에, for문 내부에서만 사용가능하고, console.log('final', i); 에서는 사용이 불가능하므로 참조에러가 뜬다.

컨텍스트

추가로 컨텍스트라는 개념이 있다. 이는 this명령어로 해당 코드가 어느 객체에 존재하는지 알 수 있다. 즉, 코드의 맥락이 어딘지 알 수 있다고 해서 context라고 명칭을 한다.

• this 키워드를 통해 어느 객체의 바로 밑인지 알 수 있음