Programming/React13

• 

  [에러 기록] SyntaxError: unknown: Namespace tags are not supported by default React 앱에서 SVG를 MUI SvgIcon에 넣어 SVG 아이콘이 필요한 곳에 사용 중이었는데, 새로운 아이콘을 만드는 과정에서 앱이 렌더링이 안되면서 해당 에러가 나타났다. 처음에는 MUI와 관련된 에러인가 했지만, 스택오버플로우에서 SVG와 JSX(React)가 충돌해 발생하는 에러라는 사실을 알게 됐다. SVG는 XML(미리 태그가 지정되지 않은 마크업 언어)로 쓰여진 2차 벡터 그래픽 마크업 언어다. 이 때 namespace라는 건 XML을 사용하는 다른 언어들과 충돌하거나 혼동되지 않도록 이것이 SVG에 속한다고 명시해 주는 역할을 하는 요소다. 웹앱에서 SVG의 경우 이제 namespace를 사용하지 않아도 된다고 한다. 그런데 이 때 Figma에서 export한 SVG의 경우 간혹 가다.. Programming/React 2024. 10. 21.

• 

  [Jest] 특정 파일에 대한 커버리지 수집하며 실행하는 법 Jest로 만든 테스트를 실행할 때 npm run test:coverage 명령어로 전체 커버리지와 세부 정보를 수집할 수 있다. 그런데 작성한 테스트가 충분한 커버리지를 만들고 있는지, 더 높이려면 어떤 영역을 보충해야 할 지가 궁금할 때가 있다.아래 명령어를 사용하면 '한 가지 테스트만 실행하면서, 해당 테스트의 특정 파일에 대한 커버리지를 수집'할 수 있다.이 때 테스트 대상 파일과 커버리지 수집 파일은 달라도 된다.  npm test blahblah.spec.js -- --coverage --collectCoverageFrom=src/js/woofwoof.js Programming/React 2024. 7. 8.

• 

  [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.