Study/npm Libraries (6) 썸네일형 리스트형 React with web accessibility npm install eslint-config-airbnb npm info "eslint-config-airbnb@latest" peerDependencies # peerDependencies 목록 ## eslint-plugin-import ## eslint-plugin-jsx-ally ## eslint-plugin-react ## eslint-plugin-react-hooks 에어비앤비에서 설정한 es lint 모듈을 설치하면, 다음과 같은 하위 dependencies가 프로젝트에 포함된다. eslint-plugin-jsx-a11y 모듈 이 모듈은 web accessibility 규칙을 준수하는 JSX 코드를 작성할 수 있도록, JSX 코드를 평가한 뒤 코드 에디터에 경고/에러를 띄운다. => 자세한 .. TanStack Query(React Query) What is react-query? | official website, react-query-tutorial repo 리액트 쿼리는 리액트 어플리케이션에서 데이터 fetching과 관련된 상태를 관리해 주는 라이브러리이다(이제는 리액트 뿐만 아니라, 다른 프레임워크에서도 사용이 가능하다). 리액트는 컴포넌트를 중심으로 ui를 렌더링하는 라이브러리이기 때문에, data fetching에 정해진 패턴이 없다. 일반적으로는 useEffect를 이용해 request를 보내고, useState를 이용해 관련된 상태(로딩중, 에러, response...)를 관리한다. 이러한 비동기/서버 관련 state는 클라이언트 측의 state(ex. theme)와는 매우 다르다. client vs. server state 클.. React-router(v6) $ npm i react-router-dom@6 $ npm i react-router-dom@latest +) upgrainig from v5 BrowserRouter index.js에 똑같이 제공해 주어야 한다. Switch => Routes import { Redirect, Route, Routes } from 'react-router-dom'; function App() { // ... return ( ); } element | Route의 자식 요소로 렌더링할 컴포넌트를 전달하는 것이 아니라, element props으로 전달한다. without exact | v6는 exact props을 전달하지 않아도, 정확히 일치하는 route를 선택해서 반환한다. "something/*" | v5에서 ex.. React-router what is react-router? $ npm i react-router-dom@5 react-router vs. react-router-dom vs. react-router-native react-router는, 클라이언트 측에서 다양한 페이지를 갖는 리액트 어플리케이션을 만들 수 있도록 도와주는 패키지이다. react-router-dom은 브라우저에서 실행되는 리액트 어플리케이션을 위한 react-router이다. how react-router works? 리액트 라우터를 이용한다는 것은, 서로 다른 경로가 서로 다른 컴포넌트(or page)를 렌더링하게 만든다는 것을 의미한다. 즉, SPA에서 MPA의 장점을 이용하는 것이다. 어떻게 이것이 가능할까? 사용자가 새로운 url을 요청하면, 리액트 .. React-redux & Redux-toolkit $ npm i redux $ npm i react-redux redux | 모든 js 프로젝트에서 사용할 수 있는 state management 패키지 react-redux | 리액트 어플리케이션에서 redux의 store/reducer에 간단히 접속할 수 있도록 도와주는 패키지 src/store 폴더를 만들어서 redux와 관련된 파일을 관리한다. redux dev tool | redux toolkit을 이용하면 확장 프로그램을 설치만 하면 사용할 수 있다. 아니면 추가적으로 코드를 작성해야 한다. redux with react 컴포넌트에 store 제공하기 | provider // src/store/index.js import { legacy_createStore } from 'redux' impor.. what is Redux? what is Redux? Redux is a library, managing cross-component or app-wide state. local state | 하나의 컴포넌트에서 사용되는 state ex) input에 입력한 state cross component state | props을 통해 여러 컴포넌트에 영향을 미치는 state ex) modal app wide state | app 전체(또는 대부분)에 영향을 미치는 state ex) authorization context vs. Redux 여러 컴포넌트에 영향을 미치는 state나, 앱 전체에서 사용될 수 있는 state를 관리할 때 react의 context api를 이용할 수 있다. 즉 redux는 context와 같은 역할을 한다... 이전 1 다음
