velopert/react-tutorial

벨로퍼트와 함께하는 모던 리액트 튜토리얼 문서

벨로퍼트와 함께하는 모던 리액트

본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있다는 전제하에 진행됩니다.

강의 소개

이 튜토리얼의 이름은 왜 "모던 리액트" 일까요? 사실, 개발 관련 튜토리얼에서 "모던함"을 오랫동안 유지하는 것이 솔직히 어렵기 떄문에, "모던" 이라는 키워드를 붙이는게 조금 조심스럽기도 합니다. 이 강의는 2019년 기준에서 현재 리액트 개발 패러다임을 최대한 쫓아가는, "모던"한 강의 입니다. 리액트는 2013년에 처음 릴리즈되었는데요, 근 몇년동안, 리액트 개발팀에서는 어떻게 하면 리액트 개발자들이 더 편하게 개발을 할 수 있을까? 라는 고민을 열심히 하면서 계속해서 리액트 개발 방식이 조금씩 바뀌고 있습니다.

리액트 개발 생태계에서 2019년에 찾아온 큰 변화는 도태된 클래스형 컴포넌트와 Hooks 을 사용하여 부흥한 함수형 컴포넌트라고 생각합니다. 이 강의는 이 트렌드에 맞춰서 준비되었습니다.

몇년이 지나면, 어쩌면 이 강의는 더 이상 "모던"해지지 않을 것 입니다. 하지만 적어도 여러분이 글을 읽고 있는 지금 시점에서는 이 강의는 "모던"한 강의입니다.

시간이 지났는데 제가 이 강의를 업데이트하지 않게 된다면 모던이라는 키워드를 빼겠습니다 :)

강의 대상

이 강의는 JavaScript 의 기초를 알고 있어야 원활하게 진행 할 수 있으니, 만약 JavaScript 를 잘 모르신다면, 벨로퍼트와 함께하는 모던 자바스크립트 튜토리얼을 먼저 학습해주세요. 이 강의는 리액트를 한번도 사용해보지 않으신분들을 대상으로 만들어졌으며, 강의 후반부로 갈수록 심화 과정을 다루게 되기 때문에 리액트의 기초를 이미 어느정도 알고 계신 분들께도 도움이 됩니다.

react-tutorial's Issues

벨로퍼트와 함께하는 모던 리액트 · GitBook

벨로퍼트와 함께하는 모던 리액트 · GitBook

https://react.vlpt.us/

26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 · GitBook

26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 · GitBook

https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html

3. 리덕스 사용 할 준비하기 · GitBook

3. 리덕스 사용 할 준비하기 · GitBook

https://react.vlpt.us/redux/03-prepare.html

5. TypeScript 에서 리덕스 프로처럼 사용하기 · GitBook

5. TypeScript 에서 리덕스 프로처럼 사용하기 · GitBook

https://react.vlpt.us/using-typescript/05-ts-redux.html

4. 리덕스 모듈 만들기 · GitBook

4. 리덕스 모듈 만들기 · GitBook

https://react.vlpt.us/redux/04-make-modules.html

5. 카운터 구현하기 · GitBook

5. 카운터 구현하기 · GitBook

https://react.vlpt.us/redux/05-counter.html

6. 조건부 렌더링 · GitBook

6. 조건부 렌더링 · GitBook

undefined

https://react.vlpt.us/basic/06-conditional-rendering.html

5. Context 와 함께 사용하기 · GitBook

5. Context 와 함께 사용하기 · GitBook

undefined

https://react.vlpt.us/integrate-api/05-using-with-context.html

react-typescript

Velopert 김민준 강사님 :)

리액트 관련 많은 지식 공유와 강의 덕분에 정말 많은 도움을 받고 있습니다 :)

다름이 아니라 현재 타입스크립트를 공부하다가 강사님 블로그를 보게 되었는데요~ 아래 링크에 보시면

https://react.vlpt.us/using-typescript/02-ts-react-basic.html#

중간에 Greetings 컴포넌트의 props name설정이
예시문과 살짝 다른거 같아서 수정 요청 드리고 싶어 글을 남기게 되었습니다:)

import React from 'react';
import Greetings from './Greetings';

const App: React.FC = () => {
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return <Greetings name="Hello" onClick={onClick} />;
};

export default App;

예시문에서는 onClick시에 React says hello 로 나와 있어서요 :)

<Greetings name="React" onClick={onClick} />

으로 props 네임값을 React로 수정 요청드려도 될까요? :)👍

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook

undefined

https://react.vlpt.us/basic/20-useReducer.html

3. 기능 구현하기 · GitBook

3. 기능 구현하기 · GitBook

https://react.vlpt.us/mashup-todolist/03-implement.html

3. 나의 첫번째 리액트 컴포넌트 · GitBook

3. 나의 첫번째 리액트 컴포넌트 · GitBook

https://react.vlpt.us/basic/03-first-component.html

5. useReactRouter Hook 사용하기 · GitBook

5. useReactRouter Hook 사용하기 · GitBook

https://react.vlpt.us/react-router/05-use-router-hook.html

1. 컴포넌트 만들기 · GitBook

1. 컴포넌트 만들기 · GitBook

undefined

https://react.vlpt.us/mashup-todolist/01-create-components.html

9. 여러개의 input 상태 관리하기 · GitBook

9. 여러개의 input 상태 관리하기 · GitBook

undefined

https://react.vlpt.us/basic/09-multiple-inputs.html

4. redux-thunk · GitBook

4. redux-thunk · GitBook

https://react.vlpt.us/redux-middleware/04-redux-thunk.html

3. useAsync 커스텀 Hook 만들어서 사용하기 · GitBook

3. useAsync 커스텀 Hook 만들어서 사용하기 · GitBook

https://react.vlpt.us/integrate-api/03-useAsync.html

1. 리액트는 어쩌다가 만들어졌을까? · GitBook

1. 리액트는 어쩌다가 만들어졌을까? · GitBook

https://react.vlpt.us/basic/01-concept.html

21. 커스텀 Hooks 만들기 · GitBook

21. 커스텀 Hooks 만들기 · GitBook

https://react.vlpt.us/basic/21-custom-hook.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook

undefined

https://react.vlpt.us/basic/16-useEffect.html

13. 배열에 항목 추가하기 · GitBook

13. 배열에 항목 추가하기 · GitBook

https://react.vlpt.us/basic/13-array-insert.html

02. CSS Module

https://github.com/velopert/react-tutorial/blob/master/styling/02-css-module.md

해당 내용에서

import styles from './CheckBox.module.css';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

function CheckBox({ children, checked, ...rest }) {
  return (
    <div className={cx('checkbox')}>

부분이 있는데 그냥

import styles from './CheckBox.module.css';
import classnames from 'classnames';

function CheckBox({ children, checked, ...rest }) {
  return (
    <div className={classnames(styles.checkbox)}>

해도 상관 없는 것 아닌가 싶어서 문의 코멘트 남깁니다. :)

6.타입스크립트에서 리덕스 미들웨어 사용하기 (redux-thunk, redux-saga) · GitBook

6.타입스크립트에서 리덕스 미들웨어 사용하기 (redux-thunk, redux-saga) · GitBook

https://react.vlpt.us/using-typescript/06-ts-redux-middleware.html

11. 배열 렌더링하기 · GitBook

11. 배열 렌더링하기 · GitBook

https://react.vlpt.us/basic/11-render-array.html

27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet · GitBook

27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet · GitBook

https://react.vlpt.us/basic/27-useful-tools.html

2. Context API를 활용한 상태 관리 · GitBook

2. Context API를 활용한 상태 관리 · GitBook

https://react.vlpt.us/mashup-todolist/02-manage-state.html

11. redux-saga 로 프로미스 다루기 · GitBook

11. redux-saga 로 프로미스 다루기 · GitBook

https://react.vlpt.us/redux-middleware/11-redux-saga-with-promise.html

18. useCallback 를 사용하여 함수 재사용하기 · GitBook

18. useCallback 를 사용하여 함수 재사용하기 · GitBook

undefined

https://react.vlpt.us/basic/18-useCallback.html

10. useRef 로 특정 DOM 선택하기 · GitBook

10. useRef 로 특정 DOM 선택하기 · GitBook

https://react.vlpt.us/basic/10-useRef.html

3. styled-components · GitBook

3. styled-components · GitBook

undefined

https://react.vlpt.us/styling/03-styled-components.html

3. 서브라우트 · GitBook

3. 서브라우트 · GitBook

https://react.vlpt.us/react-router/03-subroutes.html

22. Context API 를 사용한 전역 값 관리 · GitBook

22. Context API 를 사용한 전역 값 관리 · GitBook

undefined

https://react.vlpt.us/basic/22-context-dispatch.html

9. connect 함수 · GitBook

9. connect 함수 · GitBook

https://react.vlpt.us/redux/09-connect.html

2. CSS Module · GitBook

2. CSS Module · GitBook

https://react.vlpt.us/styling/02-css-module.html

1장. 리액트 입문 · GitBook

1장. 리액트 입문 · GitBook

https://react.vlpt.us/basic/

12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 · GitBook

12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 · GitBook

https://react.vlpt.us/basic/12-variable-with-useRef.html

7. 할 일 목록 구현하기 · GitBook

7. 할 일 목록 구현하기 · GitBook

https://react.vlpt.us/redux/07-implement-todos.html

2. 작업환경 준비 · GitBook

2. 작업환경 준비 · GitBook

undefined

https://react.vlpt.us/basic/02-prepare.html

1. Sass · GitBook

1. Sass · GitBook

https://react.vlpt.us/styling/01-sass.html

23. Immer 를 사용한 더 쉬운 불변성 관리 · GitBook

23. Immer 를 사용한 더 쉬운 불변성 관리 · GitBook

https://react.vlpt.us/basic/23-immer.html

1. API 연동의 기본 · GitBook

1. API 연동의 기본 · GitBook

undefined

https://react.vlpt.us/integrate-api/01-basic.html

6. API 재로딩 문제 해결하기 · GitBook

6. API 재로딩 문제 해결하기 · GitBook

https://react.vlpt.us/redux-middleware/06-fix-reloading.html

1. 프로젝트 준비 및 기본적인 사용법 · GitBook

1. 프로젝트 준비 및 기본적인 사용법 · GitBook

https://react.vlpt.us/react-router/01-concepts.html

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook

undefined

https://react.vlpt.us/basic/19-React.memo.html

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

undefined

https://react.vlpt.us/basic/07-useState.html

8. input 상태 관리하기 · GitBook

8. input 상태 관리하기 · GitBook

https://react.vlpt.us/basic/08-manage-input.html

4. JSX · GitBook

4. JSX · GitBook

undefined

https://react.vlpt.us/basic/04-jsx.html

15. 배열에 항목 수정하기 · GitBook

15. 배열에 항목 수정하기 · GitBook

https://react.vlpt.us/basic/15-array-modify.html

리액트 입문 마무리 · GitBook

리액트 입문 마무리 · GitBook

https://react.vlpt.us/basic/CONCLUSION.html

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

https://react.vlpt.us/basic/17-useMemo.html