프론트엔드/React.js (12) 썸네일형 리스트형 Mobx Mobx란? react에서 redux이후로 많이 사용되는 상태 관리 라이브러리입니다. 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리입니다. mobx 공식문서: https://ko.mobx.js.org/README.html 원래는 @데코레이터를 사용했지만 mobx 6부터는 데코레이터 사용을 지양하는 중입니다. MobX 작동원리 MobX 예제를 통해 작동원리 이해하기 redux toolkit - API들 redux toolkit redux toolkit은 redux 로직을 작성하기 위한 공식 권장 접근 방식입니다. redux 코어를 둘러 싸고 있으며 redux앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있습니다. redux toolkit은 제안된 모범 사례를 기반으로 하여 대부분의 redux 작업을 단순화하고 일반적인 실수를 방지하고 redux app을 더 쉽게 작성할 수 있도록 합니다. redux toolkit 공식문서: https://redux-toolkit.js.org/tutorials/quick-start redux toolkit과 기존 redux 비교 기존 redux toolkit store생성 createStore configureStore action생성 상수와 생성자 함.. Redux 리덕스(Redux)란? Redux는 JS app을 위한 관리 라이브러리입니다. props vs state vs redux props state properties의 줄임말. 구성 요소가 서로 통신하는 방법임. 컴포넌트 안에서 데이터를 전달할 때 state사용 props는 상위 구성 요소에서 아래쪽으로 흐름 mutable 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 변경해야 함 state가 변하면 re-render 됨 redux는 state를 관리하는 것입니다. redux 데이터 Flow(strick unidirectional data flow) ACTION은 간단한 JS 객체입니다. 여기에는 우리가 수행하는 작업의 유형을 지정하는 type속성이 있으며 선택적으로 redux 저장소에.. Context React Context란? React에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 여러 가지가 있습니다. react에서 데이터 흐름 컨트롤 하는 법(state관리하는 법) state와 props를 사용해서 컴포넌트 간에 전달 react context 사용 mobx 사용 redux를 사용 react context는 component 트리의 깊이에 관계없이 props를 전달하지 않고도 component에 데이터를 제공합니다. context는 전역 데이터를 관리하는 데 사용됩니다. ex) 전역 상태, 테마, 서비스, 사용자 설정 등... context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수.. React Portal로 모달 생성하기 Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식입니다. 두 번째 인자(container)는 DOM엘리먼트입니다. 1. Container 생성 위 코드처럼, 기본 root밖에 portal을 생성하고 위에 createPortal의 두번째 인자로 사용할 예정입니다. 2. createPortal 이용하기 import ReactDOM from 'react-dom' const Modal =({ open, children, onClise }) => { if.. useRef useRef를 이용해 변수를 관리할 수 있습니다. useRef란? 변수 관리 특정 DOM을 선택할때 사용하는 React Hooks입니다. const ref = useRef(value) {current: value} ref.current === value useRef vs useState vs let state를 사용하면 state가 변경되면 컴포넌트가 다시 렌더링 되지만 ref는 렌더링되지 않습니다. 변수는 컴포넌트가 렌더링되면 다시 초기화됩니다. ref는 생명주기 동안 값은 유지됩니다. Forward Ref 부모 컴포넌트의 ref를 자녀 컴포넌트에 넘겨주고 싶을 때는 그냥 ref를 사용하면 error납니다. 해결법: 전달할 때 꼭 ref란 이름으로 전달하고 싶으면, 자식 컴포넌트에 export defa.. React Router Dom React Router Dom React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있습니다. Single Page Application(SPA) React는 SPA이기때문에 하나의 index.html 템플릿 파일을 가지고 있습니다. React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는 데 도움을 주게 됩니다. React Router Dom 설치 npm install react-router-dom --save React Router Dom 설정 앱 어디에서나 React Router를 사용할 수 있도록 설정을 해야 합니다. src폴더에서 index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성요.. React app 성능 개선하기 보호되어 있는 글입니다. React Hooks React Hooks란 무엇인가? React Hooks는 ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능입니다. React Hooks이 필요한 이유? React Hooks는 주로 Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었습니다. React Hooks는 Functional Component를 사용합니다. Class Component Functional Component 더 많은 기능 제공 적은 기능 제공 더 긴 코드 양 짧은 코드 양 더 복잡한 코드 더 심플한 코드 더딘 성능 더 빠른 성능 React 생명주기를 기존에 함수형 컴포넌트에서 사용을 못했었습니다. React 16.8 Hooks 업데이.. 기본 구성 ES7+ 확장 프로그램을 사용해서 react를 좀 더 쉽게 코딩할 수 있습니다. rce를 입력하고 enter를 치면 기본 틀이 만들어집니다. rcc를 입력하고 enter를 치도 class component 만들어집니다. rfce를 입력하고 enter를 치도 function component 만들어집니다. 이전 1 2 다음
