부산대학교 전자책도서관

책소개

본문과 소스 전면 업그레이드!
기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방법까지 알차게 배우자!

본문과 소스 전면 업그레이드!
기본기를 꼼꼼하게! 실전에서 효과적으로 활용하는 방법까지 알차게 배우자!

<리액트를 다루는 기술> 개정판이 나왔습니다. 리액트 16.8 버전에 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었습니다. 이에 맞춰 책에 사용된 주요 예시를 모두 함수형 컴포넌트 형태로 전환했습니다. 기존 내용을 보강 및 개선하고, 초판에 다루지 않았던 새로운 내용도 많이 수록했습니다. 리액트의 빅 팬이자 현업 프로그래머로서 리액트를 꾸준히 활용해 온 저자의 명쾌한 설명과 노하우가 더욱 알차게 담긴 개정판입니다.
또한, 리액트를 공부할 때 알아야 할 자바스크립트 기초 및 ES6 문법을 다룬 링크(벨로퍼트와 함께하는 모던 자바스크립트)와 책에서 사용한 리액트 라이브러리와 관련 도구의 버전이 업그레이드되면 필요한 변경 사항을 공지하는 링크(저자 깃허브)도 제공합니다.

저자소개

저자 : 김민준
저자 : 김민준
개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이기도 합니다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요하다고 여깁니다. 현재 리디(주)에서 애니메이션 스트리밍 서비스 라프텔(laftel.net)의 프런트엔드 개발을 하고 있습니다. 그리고 개발자들의 블로그 서비스인 벨로그(velog.io)를 운영 및 개발하고 있습니다.
블로그: https://velog.io/@velopert
GitHub: https://github.com/velopert

1장 리액트 시작
__1.1  왜 리액트인가?
____1.1.1  리액트 이해
__1.2  리액트의 특징
____1.2.1  Virtual DOM
____1.2.2  기타 특징
__1.3  작업 환경 설정
____1.3.1  Node.js와 npm
____1.3.2  yarn
____1.3.3  에디터 설치
____1.3.4  Git 설치
____1.3.5  create-react-app으로 프로젝트 생성하기

2장 JSX
__2.1  코드 이해하기
__2.2  JSX란?
__2.3  JSX의 장점
____2.3.1  보기 쉽고 익숙하다
____2.3.2  더욱 높은 활용도
__2.4  JSX 문법
____2.4.1  감싸인 요소
____2.4.2  자바스크립트 표현
____2.4.3  If 문 대신 조건부 연산자
____2.4.4  AND 연산자(&&)를 사용한 조건부 렌더링
____2.4.5  undefined를 렌더링하지 않기
____2.4.6  인라인 스타일링
____2.4.7  class 대신 className
____2.4.8  꼭 닫아야 하는 태그
____2.4.9  주석
__2.5  ESLint와 Prettier 적용하기
____2.5.1  ESLint
____2.5.2  Prettier
__2.6  정리

3장 컴포넌트
__3.1  클래스형 컴포넌트
__3.2  첫 컴포넌트 생성
____3.2.1  src 디렉터리에 MyComponent.js 파일 생성
____3.2.2  코드 작성하기
____3.2.3  모듈 내보내기 및 불러오기
__3.3  props
____3.3.1  JSX 내부에서 props 렌더링
____3.3.2  컴포넌트를 사용할 때 props 값 지정하기
____3.3.3  props 기본값 설정: defaultProps
____3.3.4  태그 사이의 내용을 보여 주는 children
____3.3.5  비구조화 할당 문법을 통해 props 내부 값 추출하기
____3.3.6  propTypes를 통한 props 검증
____3.3.7  클래스형 컴포넌트에서 props 사용하기
__3.4  state
____3.4.1  클래스형 컴포넌트의 state
____3.4.2  함수형 컴포넌트에서 useState 사용하기
__3.5  state를 사용할 때 주의 사항
__3.6  정리

4장 이벤트 핸들링
__4.1  리액트의 이벤트 시스템
____4.1.1  이벤트를 사용할 때 주의 사항
____4.1.2  이벤트 종류
__4.2  예제로 이벤트 핸들링 익히기
____4.2.1  컴포넌트 생성 및 불러오기
____4.2.2  onChange 이벤트 핸들링하기
____4.2.3  임의 메서드 만들기
____4.2.4  input 여러 개 다루기
____4.2.5  onKeyPress 이벤트 핸들링
__4.3  함수형 컴포넌트로 구현해 보기
__4.4  정리

5장 ref: DOM에 이름 달기
__5.1  ref는 어떤 상황에서 사용해야 할까?
____5.1.1  예제 컴포넌트 생성
____5.1.2  App 컴포넌트에서 예제 컴포넌트 렌더링
____5.1.3  DOM을 꼭 사용해야 하는 상황
__5.2  ref 사용
____5.2.1  콜백 함수를 통한 ref 설정
____5.2.2  createRef를 통한 ref 설정
____5.2.3  적용
__5.3  컴포넌트에 ref 달기
____5.3.1  사용법
____5.3.2  컴포넌트 초기 설정
____5.3.3  컴포넌트에 메서드 생성
____5.3.4  컴포넌트에 ref 달고 내부 메서드 사용
__5.4  정리

6장 컴포넌트 반복
__6.1  자바스크립트 배열의 map() 함수
____6.1.1  문법
____6.1.2  예제
__6.2  데이터 배열을 컴포넌트 배열로 변환하기
____6.2.1  컴포넌트 수정하기
____6.2.2  App 컴포넌트에서 예제 컴포넌트 렌더링
__6.3  key
____6.3.1  key 설정
__6.4  응용
____6.4.1  초기 상태 설정하기
____6.4.2  데이터 추가 기능 구현하기
____6.4.3  데이터 제거 기능 구현하기
__6.5  정리

7장 컴포넌트의 라이프사이클 메서드
__7.1  라이프사이클 메서드의 이해
__7.2  라이프사이클 메서드 살펴보기
____7.2.1  render( ) 함수
____7.2.2  constructor 메서드
____7.2.3  getDerivedStateFromProps 메서드
____7.2.4  componentDidMount 메서드
____7.2.5  shouldComponentUpdate 메서드
____7.2.6  getSnapshotBeforeUpdate 메서드
____7.2.7  componentDidUpdate 메서드
____7.2.8  componentWillUnmount 메서드
____7.2.9  componentDidCatch 메서드
__7.3  라이프사이클 메서드 사용하기
____7.3.1  예제 컴포넌트 생성
____7.3.2  App 컴포넌트에서 예제 컴포넌트 사용
____7.3.3  에러 잡아내기
__7.4  정리

8장 Hooks
__8.1  useState
____8.1.1  useState를 여러 번 사용하기
__8.2  useEffect
____8.2.1  마운트될 때만 실행하고 싶을 때
____8.2.2  특정 값이 업데이트될 때만 실행하고 싶을 때
____8.2.3  뒷정리하기
__8.3  useReducer
____8.3.1  카운터 구현하기
____8.3.2  인풋 상태 관리하기
__8.4  useMemo
__8.5  useCallback
__8.6  useRef
____8.6.1  로컬 변수 사용하기
__8.7  커스텀 Hooks 만들기
__8.8  다른 Hooks
__8.9  정리

9장 컴포

책소개

저자소개

목차