[react] react 목차

* 나만의 규칙 : ksj12172.tistory.com/822

 

* Next.js 및 backend까지 하는 pjt setting: ksj12172.tistory.com/696

* pjt setting with parcel : ksj12172.tistory.com/756

* module import & export, node.js 모듈 시스템 : ksj12172.tistory.com/16

 

* SPA란 : ksj12172.tistory.com/716

* react란 : https://ksj12172.tistory.com/412

* rootDOM node, reactDom.render(), render할 때 주의 : https://ksj12172.tistory.com/710

* 가상 DOM : ksj12172.tistory.com/755

* jsx : https://ksj12172.tistory.com/709

* layout : ksj12172.tistory.com/782

 

[ component ]

* react는 component 기반 : https://ksj12172.tistory.com/414

Note : 함수형 component rerendering은 바뀐 부분만!, return 부분이 virtual dom

* component와 map: ksj12172.tistory.com/726

* component lifecycle : https://ksj12172.tistory.com/416

* controlled component : ksj12172.tistory.com/758

* class member function에 인자 넘겨주는 법(render return에서)  : https://ksj12172.tistory.com/712

 

* props : https://ksj12172.tistory.com/415

* state : https://ksj12172.tistory.com/417

* prop-types : ksj12172.tistory.com/717

 

* createPortal : ksj12172.tistory.com/776

* portal로 만들었던 내 teespace-note-app modal : ksj12172.tistory.com/956

 

* forwardRef : ksj12172.tistory.com/777 

* strict mode : ksj12172.tistory.com/778

* storybook : ksj12172.tistory.com/891

 

[ hooks ]

* hooks : https://ksj12172.tistory.com/697

=> custom hooks 등

읽어보기 : hooks 완전 정복 velog.io/@velopert/react-hooks

linguinecode.com/post/getting-started-with-react-hooks

Hook을 사용할 때는 반드시 eslint룰 적용을 권장

* Rules of Hooks : ksj12172.tistory.com/770

* useState : ksj12172.tistory.com/737

* useEffect : https://ksj12172.tistory.com/713

* useLayoutEffect : ksj12172.tistory.com/799

* ref, useRef, createRef, callbackRef : https://ksj12172.tistory.com/705

react에서 setTimeout 활용법을 볼 수 있다

참고 : setTimeout  https://ksj12172.tistory.com/377

* setInterval과 useEffect : ksj12172.tistory.com/1016

* useReducer : https://ksj12172.tistory.com/715

* useMemo, useCallback : ksj12172.tistory.com/765

* pureComponent, React.memo : https://ksj12172.tistory.com/704

useContext, useReducer

useDispatch, useStore

 

* event : https://ksj12172.tistory.com/708

* react-dnd : react-dnd.github.io/react-dnd/about

 

[ data ] 

* 중앙저장소 : ksj12172.tistory.com/722

* AJAX : ksj12172.tistory.com/420

* Axios, Service란 : ksj12172.tistory.com/212

* context API : https://ksj12172.tistory.com/707

 

[ router ]

* react router : ksj12172.tistory.com/747

* connected-react-router : ksj12172.tistory.com/788

* react-router-dom : ksj12172.tistory.com/916

 

[ redux ]

react-redux 공식문서 : react-redux.js.org/next/api/hooks

읽어보기 : velog.io/@velopert/series/redux-or-mobx

* Redux : ksj12172.tistory.com/721

=> store, useSelector, reducer

* redux without react : ksj12172.tistory.com/906

* connect 함수로 react-redux 사용하는 법, zerocho 로그인 예제 : ksj12172.tistory.com/907

* selector : ksj12172.tistory.com/823

* connect, useSelector, useDispatch : ksj12172.tistory.com/786

* the best way to store data : ksj12172.tistory.com/796

* store : ksj12172.tistory.com/789

* action : ksj12172.tistory.com/812

* reducer, combineReducers : ksj12172.tistory.com/725

* dispatch : ksj12172.tistory.com/792

* smart and dumb component : ksj12172.tistory.com/736

* redux middleware : ksj12172.tistory.com/802

* redux 미들웨어 활용 : velopert.com/3401

* 불변성 : ksj12172.tistory.com/735

* redux-thunk : ksj12172.tistory.com/731

* redux-saga : ksj12172.tistory.com/733

* Formik : ksj12172.tistory.com/805

* Formik wizard 방식 : ksj12172.tistory.com/810

* reselect : ksj12172.tistory.com/791

 

[ library ]

* i18n : ksj12172.tistory.com/1038

* conditional rendering in functional programming, catamorphism : ksj12172.tistory.com/820

* daggy 적용 : ksj12172.tistory.com/817

* immer : ksj12172.tistory.com/734

* react-helmet : ksj12172.tistory.com/931

* react-snap : todo

* react-dnd : ksj12172.tistory.com/984

 

[ mobx ]

# 쓰는 법 1) class Store { @observable ~, @action ~}

mobx도 a = createContext(), a.provider, value={new Store()}, useContext(a)로 쓸 수 있다.

 # 쓰는 법 2) 싱글톤으로 쓰는 법 store={} 만들고 store import 해서 쓰기

* MobX : https://ksj12172.tistory.com/176

* Mobx action : ksj12172.tistory.com/818

* mobx computed : ksj12172.tistory.com/830

* observer랑 useEffect : ksj12172.tistory.com/831

 

* webpack : https://ksj12172.tistory.com/317

* serviceWorker : https://ksj12172.tistory.com/623

 

* _app.js : ksj12172.tistory.com/718

* style 주는 방법들 : ksj12172.tistory.com/698

* styled-components : ksj12172.tistory.com/967

* react-slick:carousel 구현 : ksj12172.tistory.com/728

 

* zerocho github : github.com/ZeroCho/react-nodebird/tree/master