react 5

[Redux] Redux란? 내용 총 정리!

✋ 잠깐! Flux 패턴이란?사용자 입력을 기반으로 Action을 생성하고 이를 Dispatcher에 전달하여 Store의 데이터를 변경한 뒤 View에 반영하는 단방향의 데이터 흐름을 가지는 소프트웨어 아키텍처이다. Flux 패턴으로 구현된 프로젝트는 데이터가 단방향으로만 전달되기 때문에 데이터의 흐름을 파악하기가 용이하고, 그 결과를 쉽게 예측할 수 있다는 장점이 있다. 이러한 Flux 패턴에 Reducer를 결합하여 만든 것이 바로 Redux이다!* Reducer는 이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수를 말한다.   🔎 Redux란?여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리이다. 상태?React에서 State(상태)는 component 안에서 관리되는 것이다.자식 ..

React 2024.09.17

[React] "React component names must start with an uppercase letter ~ " 오류 해결

리액트 프로젝트 중 const navigate = useNavigate();를 사용하려고 하는데 React component names must start with an uppercase letter ~ 오류가 발생했다 원인과 해결 방안은 아주 간단한데 매번 깜빡하고 리액트 프로젝트할 때마다 발생했던 오류라서 정리해야겠다 싶었음 🚨 리액트 컴포넌트가 소문자로 시작해서 생긴 오류 리액트는 대문자로 시작하는 태그를 리액트 컴포넌트로 인식하고 소문자로 시작하는 태그는 HTML 태그로 인식한다. 따라서 소문자로 시작하는 컴포넌트에서 useNavigate()를 선언해서 발생한 오류이다. 🔎 해결 방안 그냥 컴포넌트를 대문자로 시작하도록 변경해주면 된다!

React 2023.10.03

[React Native] 'react-native-vector-icons' 사용해서 아이콘 출력하기

🚨 아이콘 출력 오류 원하는 아이콘이 제대로 출력되지 않고 물음표(?)로 뜨고, 콘솔창에 오류 메시지가 출력됨 🔎 해결 방안 * 안드로이드 기준입니다! 1) android/app/main/asseets/fonts 폴더 생성 2) node_modules 아래에 있는 모든 ttf 파일을 1번에 생성한 폴더 아래로 이동한다 → 나의 경우 1,2번 과정을 하지 않아 아이콘이 제대로 출력되지 않았음 * 1번 사진 참고 3) 아래 사이트에서 원하는 아이콘 선택 https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io 4) 리액트 네이티브 프로젝트에 아래 코드 추가 ex. AntDes..

React 2023.09.19

[React Native] viroreact 라이브러리 사용 및 오류 해결

❓ ViroReact AR 및 VR을 빠르게 구축할 수 있는 라이브러리 https://github.com/ViroCommunity/viro GitHub - ViroCommunity/viro: ViroReact: The AR and VR library for React Native 📳🖤💙💛 ViroReact: The AR and VR library for React Native 📳🖤💙💛 - GitHub - ViroCommunity/viro: ViroReact: The AR and VR library for React Native 📳🖤💙💛 github.com ViroCommunity랑 ViroMedia가 있는데 ViroCommunity가 비교적 최신 버전인 것 같다 Community를 권장! 기존 프로젝트에..

React 2023.08.13