전역 상태 관리  일반적인 데이터 흐름 : 부모 → 자식 컴포넌트데이터 사용하는 컴포넌트가 많을 시 : 최상위 App 컴포넌트 (상태 관리 - props) → 하위 컴포넌트 그러나 props를 이용해 데이터를 전달하는 것은 번거롭다. 필요한 하위 컴포넌트에 도달하기까지 단계를 많이 거쳐야함부모로부터 받은 데이터는 변경할 수 없으므로 다시 역순으로 변경 요청해야함관리하는 상태 추가, 변경될 시 모든 컴포넌트를 찾아 수정해야함 위와 같은 단점이 존재하기 때문에 최상위 컴포넌트에서 전역 상태를 관리하는 것은 불편하다.  따라서중간 과정을 거치지 않고 한번에 원하는 데이터를 받아와 사용하기 위해Context API를 이용할 수 있다.   Context API  createContext 함수 : Context 생..

useMemo  동일한 연산 반복 수행 제거 => 성능 최적화첫번째 파라미터 = 함수두번째 파라미터 = 함수 실행 조건 => 배열로 전달 JavaScript, Expo, React Native로 배열을 설정하고 버튼을 클릭할 때마다 배열을 순환하며 문자열 길이를 구해보겠다. 그 결과,버튼 클릭 시 문자열 길이를 구했으며마지막 문자열 이후에는 더이상 변화가 없기에 길이를 반복해서 구하는 것을 확인했다. import React, { useState } from 'react';import styled from 'styled-components/native';import Button from './Button';const StyledText = styled.Text` font-size: 24px; `;con..

useState  변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환관리할 상태 수만큼 여러번 사용 가능값 변경은 반드시 세터함수 사용 1. 세터 함수1️⃣ 세터함수에 변경될 상태 값 전달하는 방법 const [count, setCount] = useState(0); { setCount(count + 1); }}/>  2️⃣ 세터 함수의 파라미터에 함수 전달하는 방법 파라미터 함수에 변경 전 상태 값을 전달하고 변경 방법을 정의한다. 세터 함수는 비동기로 동작하기 때문에 호출해도 상태가 바로 변경되지 않는다는 점이 문제이다.따라서 업데이트가 동시에 여러개 발생할 경우,세터 함수에 함수를 파라미터로 전달해 이전 상태값을 사용하면 문제를 해결할 수 있다.  { setCount(prev..

To-Do-List 만들기  등록 : 할 일항목을 추가하는기능수정 : 완료되지 않은 할 일 항목을 수정하는 기능삭제 : 할 일항목을 삭제하는기능완료 : 할 일 항목의 완료 상태를 관리하는 기능 프로젝트를 진행하기 앞서 styled-components/native를 사용하는 데 있어 아래와 같은 오류가 발해서 추가로 패키지를 설치해주었다.Could not find a declaration file for module 'styled-components/native'. npm install --save-dev @types/styled-components-react-native  1. SafeAreaView 컴포넌트: 외부 요인에 의해 컴포넌트 일부가 가려지는 것을 방지하기 위해 사용: 자동으로 padding ..

스타일링  1. 인라인 스타일링: 컴포넌트에 직접 스타일 입력하는 방식: 객체 형태로 전달 (HTML 과의 차이점)  직접 인라인 스타일링으로 텍스트 스타일을 조정해보겠다.첫번째 텍스트에는 글자 색을 black으로 굵기도 600으로 설정했고,두번째 텍스트에는 글자 색을 red, 굵기는 400으로 설정한 결과 각각의 텍스트에 서로 다른 스타일이 적용된 것을 확인할 수 있었다.  이와 같이 인라인 스타일링은어떤 스타일링이 적용되는지 직관적으로 잘 보인다는 장점이 있다. import React from 'react'import { View, Text } from 'react-native'const InlineStyle = () => { return ( Inline Sty..

props  1. props 부모 컴포넌트로부터 전달된 속성값, 상속받은 속성값자식 컴포넌트에서는 props 변경 불가능 -> 변경은 부모 컴포넌트에서  자식 컴포넌트에서는 부모 컴포넌트에서 전달된 props를 함수의 파라미터로 받아서 사용한다.이전 3-2장에서 커스텀 컴포넌트인 MyButton 컴포넌트에 title 속성을 부모 컴포넌트인 App.js에서 props로 전달해 설정해보겠다.  App.js에서 title에 My Button 글자를 전달하고,MyButton 컴포넌트의 함수에 파라미터로 props를 전달받아 버튼 title을 설정했다. export default function App() { return ( My Button Component );}impor..

컴포넌트  1. 컴포넌트 재사용 가능한 조립 블록 요소로 부모로부터 받은 props나 state에 따라 다양한 기능을 수행한다.  1️⃣ 내장 컴포넌트 View, Text, Button 등 다양한 내장 컴포넌트가 존재한다.내장 컴포넌트는 아래 사이트에서도 확인 가능하다. https://reactnative.dev/docs/components-and-apis Core Components and APIs · React NativeReact Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you ..

시작하며  3장 실습을 시작하기 위해 먼저 프로젝트를 생성해주겠다. 아래의 코드로 Expo 환경의 프로젝트를 생성해주었다.+ 생성 과정 중 expo -g cli가 node 환경과 맞지 않아 ExpoProject 폴더를 새로 생성한 후 로컬로 expo를 설치해주었다. + 에러가 났던 코드WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: npm i exponpx create-expo-app 프로젝트 이름 --template blank //js 환경의 expo 프로젝트 생성  + 노트북 web 환경에서 Expo 프로젝트 화면을 열기 위해 추가로 라이브러리를 설치해주었다.터미널에서 프로젝트를 실행한 ..

react-native를 설치해준 후 vscode에서 생성한 폴더를 열어주었다. 다음으로 인스타 앱을 만드는 데 필요한 이미지와 비디오 파일들을 assets폴더에 넣어주었다. src폴더 안에 components와 screens 폴더도 생성해준 후 실질적으로 앱을 구성하는 데 사용하는 소스코드를 작성해줄 영역을 만들어줬다. 다음으로 screens폴더 안에 인스타 앱 스크린을 위한 파일들을 생성해준다. 생성한 각 파일안에 기본 구조를 다음과 같이 작성해주고 만약 에러 줄이 뜬다면 .eslintrc 파일에 prettier 조건을 작성해주면 된다. 'prettier/prettier': 0, 이로써 인스타 앱을 만들기 위한 전체 구조를 생성해줬다. 다음으로 react navigation을 이용해서 라우팅을 구현해..

리액트 네이티브란? 리액트와 앱 플랫폼의 기본 기능을 사용해 안드로이드 및 ios 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크이다. 장점 1️⃣ Web view를 사용하는 다른 크롯 플랫폼과는 달리 실제 호스트 플랫폼의 표준 렌더링 API를 사용해 렌더링한다. => Web view를 사용하면 모방이 기본이기에 한계가 있다. => 그러나, 리액트 네이티브는 마크업 요소를 실제 네이티브 요소로 변환해서 사용한다. 2️⃣ 리액트와 대부분 비슷하기에 쉽다. (state, props가 변경되면 view를 렌더링하는 등) => 차이점 : 네이티브는 호스트 플랫폼의 UI 라이브러리를 활용해 이를 수행한다. 3️⃣ 대부분 비슷한 소스 코드로 ios, 안드로이드 모두를 위한 앱 개발이 가능하다. => 시간 절약 가..