초보자를 위한 리액트(React) 200제

이정열 지음

정보문화사 2021년 02월 26일 출간 국내도서 : 2021년 02월 05일 출간

작품소개

책소개

따라하면서 이해하는 React A to Z

리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나누어 단계별로 실력을 향상시킬 수 있게 구성하였다. 리액트에서 사용하는 함수와 문법, 웹 브라우저에 화면을 띄워보기로 시작되는 이 책은 변수를 관리하고 컴포넌트 유형별로 장단점을 비교하고, 태그 사용 및 이벤트 처리 구현도 할 수 있다. 또한 외부 api를 활용하는 부분도 집중적으로 다루고, node.js를 사용하여 DB 서버에서 작업을 수행할 수 있는 실무 능력까지 실습할 수 있다. 예제를 200개로 나누어 간단하게 학습할 수 있기 때문에 짧은 주기로 성취감을 얻을 수 있으며, 기능 위주의 설명으로 필요한 개발 스킬에 집중할 수 있는 장점이 있다. 이 책을 따라 하기 위한 예제 파일은 정보문화사 홈페이지(infopub.co.kr) 자료실에서 다운로드 가능하고, 학습 중 궁금한 사항의 저자 홈페이지(leejungyeoul.tistory.com)에서 피드백 가능하다.

목차

PART 1(입문) React.js 시작하기
001 .jsx에 html 적용하기
002 .jsx에 css 적용하기
003 Component 사용하기
004 생명주기 함수 render() 사용하기
005 생명주기 함수 constructor(props) 사용하기
006 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기
007 생명주기 함수 componentDidMount() 사용하기
008 생명주기 함수 shouldComponentUpdate() 사용하기
009 템플릿 문자열 사용하기
010 var, let, const 사용하기
011 전개 연산자 사용하기
012 class 사용하기
013 화살표 함수 사용하기
014 forEach() 함수 사용하기
015 map() 함수 사용하기
016 jquery 사용하기

PART 2(초급) React.js 기초 다지기
017 props 사용하기
018 props 자료형 선언하기
019 props Boolean으로 사용하기
020 props 객체형으로 사용하기
021 props를 필수 값으로 사용하기
022 props를 기본값으로 정의하기
023 props의 자식 Component에 node 전달하기
024 state 사용하기
025 setState() 함수 사용하기
026 state를 직접 변경한 후 forceUpdate() 함수 사용하기
027 Component 사용하기(class형 컴포넌트)
028 PureComponent 사용하기(class형 컴포넌트)
029 shallow-equal 사용하기(class형 컴포넌트)
030 함수형 컴포넌트 사용하기
031 hook 사용하기
032 Fragments 사용하기
033 map()으로 element 반환하기
034 reactstrap Alerts 사용하기
035 reactstrap Badge 사용하기
036 reactstrap Breadcrumbs 사용하기
037 reactstrap Button Dropdown 사용하기
038 reactstrap Button Group 사용하기
039 reactstrap Bottons 사용하기
040 reactstrap Card 사용하기
041 reactstrap Carousel 사용하기
042 reactstrap Collapse 사용하기
043 reactstrap Fade 사용하기
044 reactstrap Form 사용하기
045 reactstrap Input Group 사용하기
046 reactstrap Jumbotron 사용하기
047 reactstrap List Group 사용하기
048 reactstrap Modal 사용하기
049 reactstrap Navbar 사용하기
050 reactstrap Pagination 사용하기
051 reactstrap Popovers 사용하기
052 reactstrap Progress 사용하기
053 reactstrap Spinner 사용하기
054 reactstrap Table 사용하기
055 reactstrap Tab 사용하기
056 sweetalert2 Basic 사용하기
057 sweetalert2 position 사용하기
058 sweetalert2 confirm 사용하기
059 fetch get 호출하기
060 fetch post 호출하기
061 axios get 사용하기
062 axios post 사용하기
063 콜백 함수 사용하기
064 Promise then 사용하기
065 Promise catch 사용하기

PART 3(중급) React.js 주요 개념 이해하기
066 click 이벤트 사용하기(onClick)
067 change 이벤트 사용하기(onChange)
068 mousemove 이벤트 사용하기(onMouseMove)
069 mouseover 이벤트 사용하기(onMouseOver)
070 mouseout 이벤트 사용하기(onMouseOut)
071 key 이벤트 사용하기(onKeyDown, onKeyPress, onKeyUp)
072 submit 이벤트 사용하기(onSubmit)
073 Ref 사용하기
074 커링 함수 구현하기
075 하이오더 컴포넌트 구현하기
076 컨텍스트 api 사용하기
077 컨텍스트로 부모 데이터 변경하기
078 redux 리듀서로 스토어 생성하기
079 redux 스토어 상속과 디스패치 함수 실행하기
080 redux 리듀서에서 스토어 데이터 변경하기
081 react-redux로 스토어 상속하기
082 react-redux로 스토어 데이터 사용하기
083 react-redux로 스토어 데이터 변경하기
084 redux 미들웨어 사용하기
085 react-cookies save 사용하기
086 react-cookies load 사용하기
087 react-cookies remove 사용하기
088 react-router-dom BrowserRouter 사용하기
089 react-router-dom Route 사용하기
090 react-router-dom Link 사용하기
091 header, footer 구현하기
092 home 페이지 만들기
093 〈react img〉 태그 사용하기
094 lodash 디바운스 사용하기
095 lodash 스로틀 사용하기

PART 4(활용) React.js 외부 api 활용하기
096 서울시 유동 인구 데이터 사용하기 ① - 리스트 페이지 만들기
097 서울시 유동 인구 데이터 사용하기 ② - Open api Key 발급받기
098 서울시 유동 인구 데이터 사용하기 ③ - JSON Viewer로 데이터 확인하기
099 서울시 유동 인구 데이터 사용하기 ④ - axios로 api 호출하기
100 recharts로 LineChart 구현하기 ①(서울시 유동 인구 데이터)
101 recharts로 LineChart 구현하기 ②(서울시 유동 인구 데이터)
102 recharts로 AreaChart 구현하기(서울시 유동 인구 데이터)
103 recharts로 BarChart 구현하기(서울시 유동 인구 데이터)
104 recharts로 ComposedChart 구현하기(서울시 유동 인구 데이터)
105 recharts로 ScatterChart 구현하기(서울시 유동 인구 데이터)

출판사 서평

실무 예제로 완성하는 웹 프로젝트!

코딩을 배워본 적이 없는 IT 비전공자들도 이 책의 예제 200개를 그대로 따라 하다 보면 막힘 없이 웹 프로젝트를 구현할 수 있게 구성하였다. IT 지식이 부족해서 개발자와의 협업이 힘든 기획자, 디자이너, 마케터, 영업자들도 직접 클라우드 서버 배포까지 할 수 있게 되고, 다른 언어 개발자이지만 언어의 폭을 넓히고 싶다면 리액트 시작에 가장 적합하다. 리액트는 웹 페이지에서 눈에 보이는 프론트엔드에 특화된 언어이기 때문에 코드 이식성과 재활용성이 높고 출력 속도가 빠르다는 장점이 있다. 그리고 자바스크립트 기반의 언어이기 때문에 JS 경험이 있다면 더욱 쉽게 배울 수 있다. 이 책은 프론트엔드, 백엔드, 데이터베이스를 연결해 하나의 프레임워크를 만들고 원하는 웹 프로젝트로 구현할 수 있게 하므로 코드의 연결 고리를 익히며 익숙해지는데 흥미를 갖게 될 것이다. 특히 다양한 강의 경험이 있는 저자가 실무에서 필요로 하는 요소들을 넣었기 때문에 혼자 리액트를 시작하고자 하는 자들에게 적합한 도서이다.

작가정보

저자(글) 이정열

저자 : 이정열
- Fruit Punch 대표
- 인하대학교 사학사/소프트웨어 융합 공학사
- 멋쟁이 사자처럼 4기
- [비전공자도 가능한 웹 프로젝트] 탈잉 튜터
- 풀스택 개발자
- 아모레퍼시픽, 홈플러스, LG전자 쇼핑몰 개발
- 아주대 의료원 연구 프로젝트 개발