Programming/React12

• 

  [React] 'as' props React 컴포넌트 라이브러리 중 'as'라는 이름의 프로퍼티를 사용하는 경우가 있는 것 같다. (아마 material UI로 추측한다.) as의 역할은 해당 컴포넌트 외부(다른 파일)로부터 HTML을 가져와서 대체할 수 있도록 해주는 것이다. 기본 JSX/HTML 문법은 아니고, 일부 라이브러리에서 사용하는 것으로 보인다. 예시 코드 // class형 컴포넌트 ... return ( ... ) 'studentInputText' 컴포넌트에서는 태그에 전달된 prop들을 그대로 사용할 수 있다. 사용 이유? 정확히 알기 힘들지만(한글 자료 너무 없음!) 코드를 직접 만져 본 입장에서는 유지보수의 의미가 큰 것 같다. 해당 컴포넌트에 조건이 너무 많이 걸려 있거나 내부 작업이 많이 필요하다면 메인 컴포넌트(.. Programming/React 2023. 7. 13.

• react-redux 기본 개념 정리 react-redux를 연결해 주는 도구 사용 방법: Provider, useSelector, useDispatch 사용법 Provider 필요한 컴포넌트만 Provider 태그로 감싸준다. useSelector 사용하고자 하는 state를 가져온다(함수를 인자로 받는다.) 예시 // App.js ... import { createStore } from 'redux'; import { Provider, useSelector, useDispatch, connect } from 'react-reducx'; function reducer(currentState, action) { if (currentState === undefined) { return { number: 1, }; } const newState.. Programming/React 2023. 7. 7.

• 

  [Redux] Redux 기본 개념 Redux: 상태관리 라이브러리 Redux를 쓰는 이유 props 문법 귀찮을 때 state 변경을 관리 Redux 설치 후 store.js 파일에 state들을 보관함으로써 props가 필요 없게 된다. 사용 예제 1. state 보관하기 // index.js import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 체중 = 100; function reducer(state = 체중, action) { return state } let store = createStore(reducer) ReactDOM.render( document.getElementById('root') ) 2. state 가져와서 사용하기 /.. Programming/React 2023. 7. 7.

• 

  react-router-dom의 Outlet, Routes, Route 알고 있다시피 React는 Single Page Application 방식의 프레임워크다. react-router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에 렌더링 해주는 라이브러리다. 컴포넌트 여러 Route들을 감싸서 그 중 규칙이 일치하는 Route 하나만을 렌더링 시켜주는 역할 컴포넌트 path 속성 경로 element 속성 컴포넌트(여러 Route를 매칭하고 싶은 경우 URL 뒤에 * 사용)\ 예시 const App = () => { return ( {/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */} ); }; export default App; 태그 Outlet 태그는 중첩 라우팅을 가능하게 해주는 태그.. Programming/React 2023. 1. 2.

• 

  [react-hook-form] value-Controller-query string으로 빈 값을 보내야 하는데, MUI Select안의 빈 value(””)를 인식하지 못하는 경우 한 프로젝트에서 react-hook-form과 MUI를 사용하여 select 옵션을 주어야 하는 상황 OrgSelect.tsx const selectList = [ { label: "전체", value: "all", }, { label: "a", value: "XX", }, { label: "b", value: "XX", }, { label: "c", value: "XX", }, ... ( {placeholder} { const selected = selectList.find((v) => v.value === value) if (selected) { return selected.label } else { return placeholder } }} > {selectList?.length ? selectLi.. Programming/React 2022. 12. 14.

• 

  React-Query란? React-Query야 반가워! 근데 어렵군... React-Query란? React-Query는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술이다. 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편리하게 해주는 데 사용된다. 앱이 간단하다면 useState와 context API만 사용하더라도 대부분의 client state를 다룰 수 있다. 그러나 복잡도가 올라가고 성능 향상의 필요성이 생긴다면 도구가 필요해진다. React-Query는 Redux보다 진입 장벽이 낮으면서, hook 기반의 로직으로 되어 있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해준다. React-Query의 기능과 장점 React-Query는 .. Programming/React 2022. 12. 12.

• [RecoilRoot] RecoilRoot란? https://velog.io/@hwanieee/Recoil-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 Recoil 사용하기(feat. 간단 예제) Installation CRA(npx create-react-app)로 리액트 파일을 생성한 후 아래 cli로 리코일을 설치한다. >js // app.js import React from 'react'; import { RecoilRoot, atom, se velog.io Programming/React 2022. 12. 8.