React 6

[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

[React Native] React Native CLI + 안드로이드 스튜디오 실행

1. 기본적으로 설치해야 하는 것 - Node.js - Python - JDK - 안드로이드 스튜디오 (윈도우에서는 안드로이드만 확인할 수 있다고 하네요ㅠㅠ) 2. Android SDK 'Tools - SDK Manager' 에서 설치가 필요한 SDK는 아래 사이트 참고 https://myung-ho.tistory.com/70 [React Native] Windows에서 React native 환경 구축부터 실행까지 React Native로 개발하는 방법으로는 expo와 React Native CLI가 있습니다. Expo : - react native를 처음 사용할 때 좋음. - native 기능 제공 (위치정보, 카메라 등) - Xcode 또는 Android Studio 없이 시뮬레이터 사용 myung..

React 2023.07.26

[React] 아이콘 클릭 시 외부 페이지로 이동

🚨 navigate 사용 시 발생한 문제점 1. url 주소 오류 주소가 'localhost:3000/https://github.com/~~ ' 이렇게 된다 - 왜? react-router-dom을 사용하기 때문인데 더 정확한 이유는 모르겠다; 🔎 해결 방안 window.open(item[3])}> window.open('링크') 사용하기 참고 : https://velog.io/@elinapark/%EC%95%84%EC%9D%B4%EC%BD%98-%ED%81%B4%EB%A6%AD-%EC%8B%9C-url-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0 아이콘 클릭 시 url 이동하기 Click to URL velog.io

React 2023.02.20