ReactJS 이 정도는 알아야지

CodePen으로 바로바로 배우는 ReactJS

이효범 지음

비제이퍼블릭 2019년 03월 19일 출간 종이책 : 2018년 01월 31일 출간

작품소개

책소개

CodePen으로 바로바로 배우는 ReactJS

ReactJS는 페이스북에서 2013년도에 공개하여 빠르게 인기를 얻으며 성장하고 있는 자바스크립트 프론트엔드 프레임워크입니다. 또한 2015년에는 React Native가 발표되어, ReactJS는 모바일까지 확장되었습니다. ReactJS는 페이스북이라는 배경을 가지고 있으며, 앞으로도 꾸준히 업데이트될 예정인 살아 있는 프레임워크입니다. ReactJS는 현재 페이스북과 인스타그램, 야후, 아틀라시아 등의 대규모 프로젝트에 사용되고 있습니다.

이 책에서는 페이스북에서 제공하는 공식 문서(https://reactjs.org)를 토대로 ReactJS 사용 방법에 대해서 설명할 것입니다. 인터넷에서 코드를 바로 적용하고 결과를 확인해볼 수 있는 공간인 CodePen을 이용하여 ReactJS 예제들을 작성했고, 이 예제들은 책에서 제공하는 URL을 통해 공유했습니다. CodePen을 이용하여 공유된 ReactJS 예제들은 손쉽게 ReactJS 코드를 작성할 수 있도록 해주는 가이드가 될 것입니다.

목차

01장 ReactJS 소개
1. ReactJS란
2. ReactJS 프로젝트 생성하기

02장 JSX
1. JSX란
2. JSX에서 자바스크립트 사용하기
3. JSX에서 Attribute와 Child element 표현하기
4. JSX Tag에 Inline Style 주기
5. JSX를 객체로 표현하기

03장 Element 렌더링
1. Element란
2. DOM에 Element 렌더링하기
3. DOM에 렌더링된 Element 업데이트하기
4. 달라진 부분만 업데이트하기

04장 컴포넌트(Component)와 props
1. 컴포넌트란
2. 컴포넌트의 종류
3. 컴포넌트 렌더링하기
4. 컴포넌트 합성하기(Composing Component)
5. 컴포넌트 분리하기(Extracting Component)
6. 컴포넌트 정의 시 주의사항
7. props란
8. props 기본값 설정하기

05장 state와 setState
1. state의 필요성
2. state 사용하기
3. state 바르게 사용하기

06장 컴포넌트 생명주기(Component Lifecycle)
1. 컴포넌트 생명주기란
2. 마운팅(Mounting)
3. 업데이팅(Updating)
4. 언마운팅(Unmounting)

07장 이벤트 핸들러(Event Handler)
1. DOM 이벤트 핸들러 VS React 이벤트 핸들러
2. 이벤트 핸들러 만들기

08장 조건부 렌더링(Conditional Rendering)
1. 조건부 렌더링이란
2. If-Else를 이용한 조건부 렌더링
3. 변수를 이용한 조건부 렌더링
4. 삼항연산자를 이용한 조건부 렌더링
5. && 연산자를 이용한 조건부 렌더링
6. 조건부 렌더링으로 렌더링 막기

09장 리스트(List)와 Key
1. 리스트 컴포넌트
2. key

10장 Form
1. Controlled 컴포넌트
2. Uncontrolled 컴포넌트

11장 Lifting State Up
1. 진실의 근원(source of truth)
2. Lifting State Up 예제
3. Clock 컴포넌트에서 Lifting State Up

12장 React의 강력한 Composition
1. Composition VS Inheritance
2. Containment
3. Specialization
4. Clock 컴포넌트의 Composition

13장 ReactJS 정리: 간단한 포스팅 만들기
1. 포스트 예제 구조
2. 포스트 예제 CSS
3. PostContainer 컴포넌트
4. 포스트 예제 결과

출판사 서평

- 독자대상: 초중급　
웹 프론트엔드 개발에 관심 있는 개발자
페이스북, 인스타그램의 개발 기술에 관심이 있는 웹 개발자
최신 웹 트렌드에 관심이 있는 IT 전문가

- 특징:
① 개발사(페이스북)에서 제공하는 공식 문서를 토대로 하여 ReactJS의 핵심만 설명했습니다.
② CodePen을 이용하여 별도의 툴을 설치하거나 설정할 필요 없이 ReactJS를 공부할 수 있습니다.
③ CodePen을 이용하여 예제들을 공유했고, 공유된 예제들로 간편하게 ReactJS 코드를 직접 수정, 실행할 수 있도록 했습니다.

ReactJS는 화면의 변화가 많은 프로젝트에서 사용하기 적합한 프레임워크입니다. 페이스북에는 수많은 콘텐츠들이 있고, 그 많은 콘텐츠들을 스크롤하면서 보여줘야 했습니다. DOM은 출력되는 속도가 느려 화면의 변화가 많은 페이스북에서는 성능의 한계가 있었습니다. 성능 향상을 위해 ReactJS는 가상 DOM을 사용하여 DOM의 성능을 높였고, 재사용 가능한 컴포넌트 기반의 개발 방식으로 인해 컴포넌트의 재사용률이 높아지고 개발 속도가 빨라졌습니다.
CodePen은 웹(https://codepen.io/)에서 코드를 작성하고 실행하기 때문에 코드 작성을 위한 Text Edit Tool이나 NodeJS 등 각종 툴의 설치가 필요 없으며, 인터넷이 가능한 곳이라면 어디든 코드 작성과 공유가 가능합니다. 이 책에서는 CodePen을 사용하여 ReactJS를 개발하는 여러 가지 방법 중 Create React App으로 실제 ReactJS 서비스를 위한 프로젝트를 생성하는 방법과 Online Code Playground인 CodePen을 사용하여 ReactJS를 개발하는 방법에 대해 이야기하도록 하겠습니다.

작가정보

저자(글) 이효범

저자 : 이효범
고3 입시 때, 친구들과의 경쟁을 피하기 위해 가위바위보로 결정된 전공이 컴퓨터공학이었다. 컴퓨터공학을 공부하던 중에 프로그래머라는 천직을 찾아냈고, 광운대학교 컴퓨터 공학과를 졸업하여 웹 프로그래머로 일하게 되었다.
웹 분야 중 주로 웹 프론트엔드 개발을 하고 있으며, 현재 인프라웨어 테크놀로지에서 웹 & 모바일 웹앱 개발자로 활동하고 있다.
최신 웹 프레임워크 트렌드에 관심이 많다. 계속 변화하고 있는 웹 트렌드에 뒤처지지 않고, 배움을 게을리하지 않는 개발자가 되기 위해 웹 개발 관련 기술을 포스팅하는 블로그(http://beomy.tistory.com)를 운영하고 있다.