CHAPTER 1 리액트 소개
리액트를 사용하면 자바스크립트 안에서 HTML 같아 보이는 코드를 작성할 수 있고, 그런 태그tag를 브라우저에서 실행하려면 전처리기가 필요하다는 것도 사실이다. 그리고 아마도 웹팩webpack과 같은 도구가 필요할 것이다. 하지만 단 5분만 리액트를 써보기 바란다.
1.1 튼튼한 토대
이 책의 목표는 학습 로드맵, 즉 리액트 학습 과정을 제시함으로써 리액트를 배우는 과정에서 혼란을 최소화하는 것이다. 리액트를 자세히 파고들기 전에 자바스크립트를 아는 게 우선이다. 자바스크립트를 모두 다나 패턴을 알아둘 필요는 없지만 적어도 배열, 객체, 함수엔 익숙해져야 유용하게 써먹을 수 있다.
1.2 리액트의 과거와 미래
리액트는 페이스북 엔지니어 조던 워크가 만들었다.. 2015년과 2016년엔 라우팅, 상태 관리 등의 작업을 처리하기 위한 React Router, Redux, Mobx와 같은 유명한 도구가 많이 나타났으며 무엇보다도 리액트는 자신을 라이브러리라고 소개한다. 이 말은 리액트가 모든 유스케이스use case에 적합한 도구를 제공하지 않고 특정 기능만 구현해 제공하는 데 관심이 있다는 뜻이다.
리액트 역사에서 일어난 큰 사건으론 2017년 릴리스된 리액트 파이버Fiber를 들 수 있다. 파이버는 리액트 렌더링 알고리즘을 마법적인 기법을 사용해 재작성한 것으로 내부를 완전히 다시 작성했지만 외부에 공개된 API는 거의 달라지지 않았다. 그리고 사용자에겐 영향을 끼치지 않으면서 리액트를 더 현대화하고 성능을 높이기 위한 작업이었다.
조금 더 최근인 2019년엔 훅스Hooks가 릴리스됐다. 훅스는 여러 컴포넌트 간에 상태가 있는 로직을 추가하고 공유하는 새로운 방법이다. 그리고 리액트의 비동기 렌더링을 최적화하는 방법인 서스펜스도 발표됐다.
리액트와 관련 도구가 변함에 따라 때로는 기존 코드가 깨지는 변화가 생길 수도 있다. 실제로 이런 도구의 새 버전 중 일부가 릴리스될 때 리액트 코어 팀은 새로운 내용에 대해 블로그에 글을 올리고 변경 로그를 남긴다. 문서 사이트의 언어 페이지에서 지역화된 버전을 살펴볼 수 있다.
1.3 코드 예제 사용법
1.3.1 파일 저장소
이 책의 깃 저장소에는 각 장 별로 정리된 소스코드 파일이 들어있다. (한글판의 저장소).
1.3.2 리액트 개발자 도구
리액트 프로젝트를 진행할 때는 리액트 개발자 도구를 설치하라고 강력히 권장한다. 이런 도구는 크롬이나 파이어폭스 확장으로 사용할 수 있고 사파리, 익스플로러, 리액트 네이티브와 함께 사용할 수 있는 독립 실행 프로그램도 있다. 개발자 도구를 설치하고 나면 리액트 컴포넌트 트리를 들여다볼 수 있고, 심지어는 프로덕션에서 리액트를 실행하는 경우도 내부를 살펴볼 수 있다. 이런 도구는 다른 프로젝트에서 리액트가 어떻게 쓰이는지 배우거나 디버깅을 할 대 아주 유용하다.
개발자 도구를 설치하려면 깃허브 저장소에서 크롬 확장에 대한 링크와 파이어폭스 확장에 대한 링크를 볼 수 있다.
1.3.3 노드 설치하기
Node.js는 full stack 애플리케이션을 구축할 수 있는 런타임 환경이다. 노드는 오픈 소스이며, Windows, 맥OS, Linux 등의 플랫폼에서 설치할 수 있다. 12장에서 Express 서벌르 구축할 때 노드를 사용한다.
사용 중인 기계에 노드가 설치됐는지 여부 확인
$ node -v설치되지 않았다면 노드 웹 사이트에 가서 노드를 다운로드하고 설치. 모든 설치 단계를 그냥 진행한 후 node -v 명령을 다시 입력하면 버전 번호가 표시될 것이다.
npm
노드를 설치하면 자동으로 노드 패키지 관리자인 npm도 함께 설치된다. 자바스크립트 커뮤니티에선 같은 일을 하는 프레임워크나 라이브러리, 도우미 함수 등을 중복으로 작성하는 일이 없도록 하기 위해 엔지니어들이 오픈 소스 프로젝트를 공유한다. 리액트 자체도 유용한 npm 라이브러리의 예이다.
우리가 보게 될 대부분의 자바스크립트 프로젝트에는 다양한 파일과 더불어 package.json파일이 있다. 이 파일은 프로젝트의 의존성을 기술한다. package.json 파일이 들어 있는 폴더 안에서 npm install을 실행함녀 npm이 프로젝트에 필요한 모든 패키지를 설치해준다.
새로운 프로젝트를 밑바닥부터 시작하면서 의존 관계를 포함하고 싶다면 다음 명령을 실행
npm init -y이 명령은 프로젝트를 초기화하고 package.json 파일을 만들어준다. 이후로는 원하는 의존 관계를 npm을 통해 설치할 수 있다. npm으로 패키지를 설치하고 싶음 다음과 같이 입력
npm install 패키지-이름
# or
npm i package-namenpm으로 패키지를 제거하려면 다음과 같이 한다
npm remove 패키지-이름얀 Yarn
대안으로 얀이있다. 얀은 2016년 페이스북이 eXPONENT, 구글, Tilde와 협력해 발표한 도구다. 얀 프로젝트는 페이스북 등의 회사가 의존 관계글 좀 더 신뢰성 있게 관리할 수 있도록 돕는다. npm을 사용한 작업 흐름에 익숙하다면, 얀을 잘 사용하는 것도 꽤 쉬울 것이다. 먼저, npm에 전역(-g) 옵션을 사용해 얀을 설치한다.
npm install -g yarn이제 패키지를 설치할 준비가 됐다. package.json에서 의존 관계를 설치하려면 npm install 대신에 yarn을 사용하면 된다.
yarn add [패키지-이름]의존 관계를 없애는 명령도 익숙하게 느껴질 것이다.
yarn remove [패키지-이름]얀은 페이스북에서 프로덕션 환경에서 사용되고 있고, 리액트, 리액트 네이티브, Create React App과 같은 프로젝트에도 포함되어 있다. yarn.lock 파일이 있는 프로젝트가 바로 얀을 사용하는 프로젝트다. npm install 명령과 비슷하게 프로젝트 디렉터리 안에서 yarn을 실행하면 프로젝트의 모든 의존 관계를 설치할 수 있다.
CHAPTER 2 리액트를 위한 자바스크립트
자바스크립트는 1995년 탄생한 이래 수많은 변화를 겪어왔다. 처음엔 자바스크립트는 웹 페이지에 버튼 클릭, 마우스 hover 상태, 입력 폼 검증 등의 상호작용을 추가하기 위해 만들어진 언어였다. 그 후 DHTML과 AJAX를 거치면서 더 활발히 사용되어 왔다. 노드가 등장함에 따라 이제 자바스크립트는 풀 스택 애플리케이션을 개발하는 데 쓰이는 언어가 됐다. 이제 자바스크립트를 모든 곳에서 볼 수 있다.
장기적인 자바스크립트 변경을 이끌어 나가는 위원회는 유럽 컴퓨터 제조사 위원회European Computer Manufacturers Association(ECMA)이다. 자바스크립트 언어 변경은 커뮤니티에 의해 이루어지며 누구든 자바스크립트를 어떻게 변경할지에 대한 제안을 ECMA에 제출할 수 있다(https://tc39.github.io/process-document/).
ES6는 말 그대로 2015년에 나왔기 때문에 ES2015라 불리는데, ES2015 이후엔 매년 새로운 기능이 추가된 자바스크립트 언어 명세가 릴리스된다. 현재 제안 단계인 기능은 모두 ESNext라고 불리며, 향후 자바스크립트 명세에 들어갈 요소들을 간단히 부르고 싶을 때 ESNext라고 한다.
2.1 변수 선언하기
ES2015 전엔 var를 사용하는 것이 변수를 선언하는 유일한 방법이었다. 이젠 더 나은 기능을 제공하는 몇 가지 변수 선언 방법이 추가됐다.
2.1.1 const 키워드
상수constant는 값을 변경할 수 없는 변수이다. 일단 선언하고 나면 상수로 선언된 변수의 값을 변경할 수는 없다. 다른 많은 언어가 상수를 지원하는 것처럼, ES6부터 상수가 도입됐다.
// 상수가 없던 시잘 var 키워드로 변수를 선언
var pizza = true;
pizza = false;
console.log(pizza); // false
const pizza = true;
// pizza = false; // TypeError2.1.2 let 키워드
자바스크립트도 이젠 구문적인 변수 영역 규칙lexical variable scoping을 지원한다. 자바스크립트에서는 중괄호({})를 사용해 코드 블록을 만든다. 함수의 경우 이런 코드 블록이 별도의 변수 영역을 이룬다. 하지만 if/else 문 같은 경우는 다르다. if/else 블록 안에서 변수를 새로 만들면, 그 변수의 영역이 그 블록 안으로만 한정되지 않는다.
// var 변수의 영역은 블록 안으로 제한되지 않는다
var topic = "자바스크립트"
if (topic) {
var topic = "리액트"
console.log('블록', topic); // 블록 리액트
}
console.log('글로벌', topic); // 글로벌 리액트이 코드에서 if 블록 안의 topic 변수를 변경하면 if 블록 밖의 topic 변수 값도 변경된다(실제로는 두 변수가 같은 변수이다).
let 키워드를 사용하면 변수의 영역을 코드 블록 안으로 한정시킬 수 있다. let을 사용하면 블록 안에서 글로벌 변수를 보호할 수 있다.
// ES6 let을 쓰면 구문적 변수 영역 규칙을
// 적용할 수 있다
var topic = "자바스크립트"
if (topic) {
let topic = "리액트"
console.log('블록', topic); // 블록 리액트
}
console.log('글로벌', topic); // 글로벌 자바스크립트if 블록 안의 topic을 변경해도 if 블록 바깥의 topic엔 아무런 영향이 없다.
중괄호가 새로운 영역을 만들어내지 못하는 다른 부분으로는 for 루프가 있다.
<body>
<h1>박스를 클릭하세요</h1>
<div id="container"></div>
<script type="text/babel">
// 문제: 카운터 변수 i 영역이 for 루프 블럭 안으로만 제한되지 않는다
var div,
container = document.getElementById('container')
for (var i=0; i<5; i++) {
div = document.createElement('div')
div.onclick = function() {
alert('이것은 박스 #' + i + '입니다.')
}
container.appendChild(div)
}
</script>
</body>이 루프에선 컨테이너 안에 5개의 div를 만든다. 각 div엔 그 div의 인덱스를 경고창에 표시해주는 onClick 핸들러가 할당된다. for 루프 안에서 i를 선언해도 글로벌 영역에 i가 생긴다. 그리고, i가 5가 될 때까지 for 루프를 돈다. 여러분이 5개의 div 박스 중 어느 것을 클릭하건, i의 값은 글로벌 변수 i에 있는 5이기 때문에 표시되는 인덱스는 모두 같다.
var 대신 let을 사용해 루프 카운터 변수 i를 선언하면 i의 영역이 블록으로 제한된다. 이제 각 박스를 클릭하면 해당 박스를 루프에서 생성할 때 사용한 i 값이 정상적으로 표시된다.
// Solution, lexical variable scope
var div,
container = document.getElementById('container')
for (let i = 0; i < 5; i++) {
div = document.createElement('div')
div.onclick = function() {
alert('이것은 박스 #' + i + '입니다.')
}
container.appendChild(div)
}let으로 i의 영역을 제한한다.
2.1.3 템플릿 문자열
템플릿 문자열template string을 문자열 연결concatenation 대신 사용할 수 있다. 템플릿 문자열을 사용하면 문자열 중간에 변수를 삽입할 수도 있다.
전통적인 문자열 연결은 더하기 기호(+)로 문자열과 변수를 서로 이어 붙이는 방식을 사용한다.
const lastName = "Oh"
const middleName = "현석"
const firstName = "Frank"
// 문자열 연결
console.log(lastName + ", " + firstName + " " + middleName)템플릿에선 변수를 ${}를 사용해 문자열 안에 집어넣을 수 있기 때문에, 문자열을 단 하나만 사용해도 된다.
const lastName = "Oh"
const middleName = "현석"
const firstName = "Frank"
// ES6 템플릿 문자열
console.log(`${lastName}, ${firstName} ${middleName}`)