리액트 요소 리액트 요소는 리액트가 UI를 표현하는 수단이다. JSX 문법에는 리액트 요소가 겉으로 나타나지 않지만, 이 요소를 이해하면 리액트가 내부적으로 어떻게 동작하는지 알 수 있다. JSX 문법으로 작성된 코드는 리액트의 createElement 함수로 변경된다. createElement 함수는 리액트 요소를 반환한다. 따라서 컴포넌트 함수는 리액트 요소를 반환한다. // JSX const element = Google // createElement const element = React.createElement( 'a', { href: "https://www.google.com" }, 'Google', } // 리액트 요소 const element = { type: 'a', key: null, ..

3장은 리액트의 핵심 기능과 개념을 설명한다. 이 장의 도입부에서 프레임워크나 라이브러리를 온전히 이해하지 못한 채로 프로젝트를 진행하면 기술 부채가 늘어난다고 했다. 기술 부채, 내가 이 책을 산 이유다. 나는 리액트를 접하고 개발을 해오면서 기능은 구현할 수 있었지만, 확신이 없었다. 그러다 보니 어느 순간 성장이 더뎌진 것을 느꼈고, 리액트를 제대로 공부해야겠다는 생각이 들었다. 기술 부채를 갚아야 할 때가 온 것이다. UI 데이터 리액트는 UI용 라이브러리다. UI 라이브러리는 UI 데이터를 관리하는 방법을 제공한다. UI 데이터는 UI에 보이는 데이터다. 로그인할 때 우리가 입력하는 아이디, 비밀번호 등도 UI 데이터다. 이 UI 데이터가 변경되면 우리가 보는 화면도 그에 맞게 변해야 한다. 원..

제너레이터(generator) 제너레이터는 특이한 함수다. 함수 실행 중간에 멈출 수 있고, 재개할 수 있다. 그리고 멈출 때 값을 전달할 수도 있다. 제너레이터 함수를 정의하려면 function 키워드 뒤에 *를 입력하면 된다. 정의된 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 이 때, 함수 내부 코드는 실행되지 않는다. 함수 내부 코드가 실행되지 않으니, 위 코드에서 '제너레이터 함수 내부'가 출력되지 않았다. 제너레이터 객체는 next, return, thorw 등의 메서드를 갖고 있다. 먼저 next를 사용해보자. 제너레이터 객체 메서드 - next 제너레이터 객체는 반복자(iterator)이기 때문에 next 메서드를 사용할 수 있다. 우선 제너레이터 객체를 정의하자.' 그리곤 ne..

프로미스(promise)는 비동기 '상태'를 값으로 다룰 수 있는 객체이다. 프로미스를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식으로 코드를 작성할 수 있다. 동기? 비동기? 어려운 단어가 많이 나온다... 프로미스를 공부하기 전에 먼저 동기, 비동기에 대해 알아보자. 자바스크립트에서 동기, 비동기 동기, 비동기 개념에 대해 내가 쓴 블로그 글이다!! Sync vs Async / Blocking vs Non-blocking sync(동기)와 async(비동기)에 대하여 공부를 하다 보니 항상 따라오는게 있었다. 바로 blocking과 non-blocking이었다. 이 sync와 blocking, async와 non-blocking은 의미와 상황이 자주 혼동되지만 서로 다른 개.. junhe..

ES6+에서는 많은 자바스크립트의 기능들이 추가됐고 개선됐다. 이 중 배열과 객체에 관한 것을 알아보자. 단축 속성명 단축 속성명(shorthand property names)을 이용하면 객체를 보다 간편하게 작성할 수 있다. 객체의 속성에 간단히 변수만 적어줘도 되고, 속성값이 함수일 때, function 키워드 없이 함수명만 적어줘도 된다. 단축 속성명을 이용하면 객체를 리턴하는 함수도 간단히 만들 수 있다. // 단축 속성명 X function f(age, name) { return {age: age, name: name} } // 단축 속성명 O function f(age, name) { return {age, name} } 콘솔로 디버깅할 때도 유용하다. // 단축 속성명 X console.lo..

바쁘다는 핑계로 공부를 미루다 보니, 1장이 생각보다 늦게 끝났다... 1장에선 리액트의 기초 개념이 나왔다면, 2장에선 자바스크립트의 심화를 다룬다. 리액트가 자바스크립트 라이브러리인 만큼, 리액트 개발하는데 있어 자바스크립트의 이해는 필수적이다. 그러니 자바스크립트도 열심히 공부하자. 변수 정의 방법 자바스크립트에선 변수를 정의하는 방법이 var, const, let 세가지가 있다. 이 중 const, let은 ES6에서 새로 추가되었고, ES5까지 자바스크립트에서는 var만 이용해 변수를 정의했다. var 특징 1 - 함수 스코프 var은 함수 스코프를 가진다. 사진처럼 변수가 정의된 함수 밖에서 변수에 접근하면 참조에러가 뜬다. var은 함수 스코프이기 때문에 아래의 사진처럼 반복문에서 정의된 변..

리액트로 만든 어플리케이션의 페이지 전환은 보통 단일 페이지 어플리케이션(single page application, SPA) 방식으로 개발한다. 전통적인 방식은 페이지 전환마다 서버에 html 파일을 요청을 하는 반면에, 단일 페이지 어플리케이션 방식은 처음에만 서버에 데이터를 요청하고 이후 라우팅은 클라이언트에서 처리한다. 이렇게 단일 페이지 어플리케이션으로 개발하면 페이지 전환 시 화면 깜빡임이 없어서 좋은 유저 경험을 제공한다. 두가지 방법으로 단일 페이지 어플리케이션을 개발해보자. 먼저 브라우저 히스토리 API를 이용해보자. 브라우저 히스토리 API History - Web API | MDN History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을..

코드를 분할하면, 한번에 내려받는 양을 줄여주고 이는 첫 페이지의 렌더링 시간 단축으로 이어진다. Dynamic import는 코드를 분할하는 하나의 방법이다. import - JavaScript | MDN The static import statement is used to import read-only live bindings which are exported by another module. developer.mozilla.org 클릭시 컴포넌트가 추가되는 간단한 웹이다. Todo 컴포넌트를 하나 만든다. // Todo.js export default function Todo({ title }) { return {title} } 먼저 그냥(static) import 해보자. 버튼을 누르면 Todo ..

- create-react-app create-react-app은 편한 리액트 개발 환경을 제공해준다. Create React App Set up a modern web app by running one command. create-react-app.dev 바벨과 웹팩뿐만 아니라 테스트 시스템, HMR(hot-module-replacement), css 후처리 등이 포함되어 있다. 패키지 버전업만 해주면 되기 때문에 유지 보수도 간단한다. 나도 리액트 프로젝트를 만들 일 있으면 create-react-app으로 환경 세팅한다. (공부하면서 create-react-app 말고 아예 제로부터 셋업 해보는 것도 하나의 목표이다!!) $ npx create-react-app 1-3-create-react-app..

- 리액트 우선 리액트가 무엇인지 간단히 짚고 넘어가자면, 리액트는 페이스북에서 만든 UI 개발을 위한 자바스크립트 라이브러리다. 웹이 발전하면서 싱글 페이지 어플리케이션에 대한 수요가 증가했고, 리액트를 사용하면 효율적인 싱글 페이지 어플리케이션을 개발할 수 있다. https://www.npmtrends.com/react-vs-vue-vs-angular 프론트엔드에서 가장 유명한 세가지 라이브라리를 비교해 봤을 때, 리액트의 다운로드 수가 압도적으로 많은 것을 알 수 있다. 나도 그래서 자연스럽게 리액트를 시작한 것 같다. 리액트는 api통신이나 클릭과 같은 이벤트로 상탯값이 변경되었을 때, 변경된 값을 자동으로 UI에 업데이트(렌더링) 해준다. 이때, 효과적인 렌더링을 위해서 리액트는 가상돔(Virt..