React
-
next는 페이지 만들기도 엄청 쉽네?React/Next.js 2023. 1. 31. 11:51
이전 남긴 글에서는 next가 폴더기준으로 route설정을 하는 것 같다고 적었는데 아니였다. file로 인식을 하는거시여따!!!! 이렇게 about.js 파일을 pages 폴더 안에 만들어봤다. 코드를 적으면서, next가 / 뒤 주소를 뭘로 정할지 궁금했다. 컴포넌트 이름은 Potal로 만들고 파일을 about.js로 만들었다. 3000/about 으로 접숙했을 때 about이 잘 뜨고있다. 근데 여기서 또 궁금한게 생겼다. 저 export를 지우면? 에러가 나는거슬 볼 수 있다. export를 해주면 똑똑한 next가 알아서 import를 해서 routing을 해주는 것 같다. 오호라..좋은걸? 이런식으로 위에 abc.js도 만들어줬고 3000/abc 로 접속해도 페이지가 잘 뜨고 있다. 근데, i..
-
React Native로 영화소개 서비스 만들기-1. UI 만들기(1)React/React Native 2023. 1. 3. 22:55
저번엔 TodoList를 만들었는데, 이번에는 이 후 강의에서 배운 여러 라이브러리,API들을 통해서 영화들을 소개하는 서비스를 만들어보려고 한다. 오늘 강의는 여러 라이브러리를 사용해서 UI 만드는 것을 배웠고, 그것들을 적용해서 오늘의 과제인 UI를 만들어보려고 한다. 그리고 오늘부터 모든 설치는 yarn 으로만 기재하기로 했다. 목표 위와 같은 이미지를 만드는것이 목표이다. 1. EXPO Project 설치 및 셋업 1-1. EXPO Project 설치 https://reactnative.dev/docs/environment-setup React Native 공식문서에서 Expo Go를 터미널 통해 설치한다. 만들 파일명은 Movie-introduction-task 이다.(파일명 자유) 설치 완료가..
-
TodoList에 AsyncStorage 사용하기React/React Native 2023. 1. 2. 12:18
웹에서는 LocalStorage, 앱에서는 AsyncStorage https://react-native-async-storage.github.io/async-storage/docs/install/ 설치 npm install @react-native-async-storage/async-storage yarn add @react-native-async-storage/async-storage 사용하기 AsyncStorage는 비동기적으로 실행해야 하며, 즉 함수 안에서만 실행 할 수 있다. import AsyncStorage from '@react-native-async-storage/async-storage'; // 사용하기 위해 import 해온다. // 현재 최신 todos를 AsyncStorage에 저..
-
React Native로 TodoList 만들기React/React Native 2022. 12. 30. 16:48
React Native로 TodoList 만들기 뼈대+CSS(styled component 사용) - styled component는 install 설치해줘야 한다. https://emotion.sh/docs/@emotion/native 참고 yarn add @emotion/react @emotion/native npm install @emotion/react @emotion/native 둘중 하나 원하는걸로 설치 import styled from '@emotion/native'; import 해오기 뼈대 코드 import {StatusBar} from 'expo-status-bar'; import styled from '@emotion/native'; import {TouchableOpacity} fr..
-
React Native 설치 및 로컬환경 작업부터 배포까지React/React Native 2022. 12. 29. 13:15
설치 전 사전작업 - https://expo.dev/ 가입하기 - 휴대폰에 Expo Go 어플 설치하기 설치하기 1. https://expo.dev/ 접속 2. 처음 프로젝트를 만든다면 왼쪽 메뉴에서 Create Project 버튼을 클릭, 프로젝트를 생성한 적이 있다면 아래 버튼 클릭 3. 프로젝트 이름 작성 후 Create 버튼 클릭 4. 터미널에 아래 명령어 순서대로 입력 중요! 3번의 id 뒤에 3538d55d.... 이 부분은 변경이 되는 부분이니 저장해놓고 쓰지 말고 그때그때 확인해서 입력하기. 4-1. 맥북의 경우 1번 설치에서 Error가 발생한다면, 아래 명령어로 입력 sudo npm install --global eas-cli 4-2. 3번은 파일 경로로 들어가서 expo랑 연결해주는 ..
-
Custom HookReact 2022. 12. 21. 16:27
Custom Hook - 반복되는 로직이나 중복되는 코드를 우리만의 Hook, 즉 Custom Hook을 통해 별도로 관리할 수 있다. // src/App.jsx import React from 'react'; import {useState} from 'react'; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(''); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useSt..
-
성능 최적화를 위한 React-hookReact 2022. 12. 21. 15:54
memo - 정확히 말하면 hook은 아님 - 밑에서 정리할 useCallback이나 useMemo를 사용하기 위해 반드시 알아야하는 개념 - 컴포넌트에 불필요한 렌더링을 하지 않도록 해주는 함수 (화면에서 변경되는 부분이 없음에도 불구하고 화면이 다시 렌더링 되는 것) 화면이 리렌더링 되는 경우 부모 컴포넌트가 렌더링 된 경우 컴포넌트 스테이트가 변경 된 경우 부모로부터 전달받은 props 값이 변경되는 경우 불필요한 리렌더링을 줄이는 것만으로도 프로젝트의 부하를 줄이고 퍼포먼스 능력을 향상시킬 수 있기에 최적화를 잘 하면 굉장히 좋은 결과를 기대할 수 있음 리렌더링 과정 위 사진에서 보듯이, input의 value값에 한글자라도 변경이 일어나면 리렌더링 되는 것을 볼 수 있다. input은 App.j..
-
리액트 라이브러리 및 프로젝트 설치방법(계속 수정중)React/React 라이브러리 2022. 12. 20. 22:48
1. 리액트 프로젝트 생성 yarn create react-app 만들폴더명 2. styled-components 설치 및 import yarn add styled-components import styled from 'styled-components' 3. Redux 설치 yarn add redux react-redux 적용 방법은 링크 참고 https://my-engineering-blog.tistory.com/49 Redux(1)-설치 및 counter app 만들기 Redux 상태관리 라이브러리 전역상태관리 이전에 배운대로라면 props를 통해서 부모->자식 에게로만 정보를 전달 할 수 있었다. 그 한계 때문에 여러 문제가 생기기 때문에 Redux라는 라이브러리를 my-engineering-blo..