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, 안드로이드 모두를 위한 앱 개발이 가능하다. => 시간 절약 가..

Refs, Portals를 활용하지 않고 문제 해결하기(state 활용) 페이지에 이름을 입력하면 환영인사가 이름으로 입력되도록 state를 활용하여 수정해보도록 하겠다. state를 활용해 버튼을 클릭할 때 동작이 이루어지도록 설정하고 'setSumitted(false);'를 추가해주어 입력을 수정할 때마다 같이 수정되는 것을 방지하고 입력창을 수정할 시 다시 'unknown entity' 문구가 페이지에 나타나도록 해주었다. import { useState } from "react"; export default function Player() { const [enteredPlayerName, setEnteredPlayerName] = useState(""); const [submitted, setSu..

컴포넌트와 마찬가지로 css 또한 파일을 분리하여 저장하는 것이 좋다. 관련한 css파일을 만들어주고 import를 이용해 스타일을 적용해준다. 바닐라 css 장점 1. css 파일을 import 하면 적용가능하며, 다른사람도 파일을 받아 작업하는 것이 가능하다. 2. css를 직접 작업할 수 있다. 모든 것은 작업하는 사람에게 달려있는 것이다. 단점 1. css를 알아야한다. 2. 다른 컴포넌트 간 css 충돌이 발생할 수 있다. 2번의 의미는 css가 원하는 컴포넌트로 스코핑되지 않을 수 있다는 것이다. 지정한 클래스나 id에 해당하는 모든 파일의 코드에 css가 적용된다는 것이다. 따라서 이는 크게 문제가 되지 않지만, 특정한 css만 적용하고 싶다면 inline css를 통해 해결할 수 있다. i..

디버깅(debugging) 디버깅이란 오류 메시지를 자세히 살펴보는 것으로 오류를 이해하고 찾아서 고치는 과정이다. 이전 글에서 만들었던 프로젝트를 기반으로 디버깅을 해보려 한다. 오류들을 하나씩 살펴보겠다. 1. Duration에 음수 값 대입 duration에 양수의 값만 대입할 때는 아무문제 없는 것처럼 보였으나, 0이나 음수의 값을 대입하자 페이지가 실행되지 않으면서 개발자 도구에 다음과 같은 오류 메시지가 떴다. 위 오류는 Uncaught TypeError로 정의되지 않은 값에 대한 오류이다. 즉, 음수에 대한 동작이 정의되어있지 않다는 의미로 valueEndOfYear 속성을 읽어오는 것에 실패했다는 것이다. 따라서 valueEndOfYear 속성에 접근하는 부분에서부터 오류 수정을 시작해보겠..

일부 필요한 계산 식과 기본 틀은 주어져 있는 파일을 사용하였다. 현재까지 배운 컴포넌트 분리, State 활용, 이벤트 핸들링, 양방향 바인딩, State 끌어올리기, 조건적 컨텐츠 출력 등을 활용하였다. 앱은 투자 금액, 이자 등을 계산해주는 내용이다. 다음은 시연 영상이다. 코드는 깃허브 주소를 올려두겠다. 시연 영상 깃허브 https://github.com/BB545/-react-Practice-Project-1

Fragment JSX 표현식은 하나의 상위 혹은 부모 요소를 가지고 있어야 한다. 값을 하나만 반환할 수 있기 때문이다. 따라서 두개이상의 값을 반환하려고 하면 상위 요소로 묶어 주어야한다. div태그와 같이 불필요하게 코드가 늘어나는 것을 방지하기위한 대안으로 fragment 컴포넌트가 있다. Fragment : 형제 컴포넌트를 감싸는 용도로 사용하는 특수한 태그(대안 : 빈태그) Feature 및 State로 컴포넌트 분리 예를들어, App컴포넌트를 간단하게 하기위해 새로운 파일을 형성해 컴포넌트를 분리해주었다. (import, useState 등 활용) 따라서 App컴포넌트에서는 컴포넌트 파일만 불러와서 사용하므로 코드가 많이 간결해진 것을 확인할 수 있다. function App() { retu..