본문 바로가기

FrameWork

 (18)
[React] Component / & 모든 부모 컴포넌트의 속성을 그대로 전달하기 위한 문법 …props 는 해당 컴포넌트로 모든 부모컴포넌트에서 전달된 속성들을 그대로 전달하기 위한 문법이다. 이렇게 사용함으로써 Daycomponent 에서는 부모 컴포넌트에서 전달된 속성을 그대로 사용할 수 있다. 직접 각 속성을 나열하려고 한다면, 새로운 속성이 추가될때마다 일일이 수정해야 하기 때문에 유지보수가 어려워진다. …props 를 사용하면 부모컴포넌트에서 어떤 속성이든 자동으로 전달되므로 코드의 유연성이 높아진다. 그러나 특정한 속성이 있다면 해당 속성은 개별적으로 전달하는 것이 좋다. // parents ( )} style={styles.calenderWrap} /> // Children function DayComponent({ date, state, todos, setSelectedDate ..
[React] 함수형 업데이트 패턴 (최신 값 보장) 이전상태를 참조하는 함수형 업데이트를 사용할때, 해당 상태의 이전 값을 안전하게 참조하기 위해 매개변수를 사용한다. 매개변수를 사용하면 현재의 값이 아닌, 이전의 값을 가져온다. 직접 업데이트 배열을 사용하게 된다면 React 는 최신 상태를 보장하지 못할 수 있다. 이 매개변수는 개발자가 직접 선언하거나 초기화 할 필요 없이 React 가 이를 관리하며, 함수형 업데이트 패턴을 통해 이전 상태를 안전하게 참조하고 현재 상태의 값을 신뢰성 있게 참조하기 위한 메커니즘이다. [ 예제 ] import { useEffect, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Calendar } from..
[React] Prettier 설정 → package.json 입력후, npm i { "name": "react_practice", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint ." }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", "eslint": ..
[React] Hook Hook : 컴포넌트에서 상태(state) 나 생명주기 메서드 등의 기능을 사용할 수 있게 해주는 함수 [ useState : 컴포넌트 상태 추가 ] → 컴포넌트에서 상태를 추가할때 사용. → ‘state’는 현재 상태를 나타내고, setState 는 상태를 업데이트 한다. → React 에서 상태를 변경할 때는 상태를 직접 수정하는 것이 아니라, 해당 상태를 업데이트 하는 함수를 통해 변경해야 한다. 이렇게 하는 이유는 React 컴포넌트가 상태 변경을 감지하고 적절한 시점에 렌더링을 다시 할 수 있도록 하기 위해서 이다. const [state, setState] = useState(initialState); removeList 예시 const [todos, setTodos] = useState([]..
[React Native] Install 1. Project 생성 npx create-expo-app AwesomeProject cd AwesomeProject yarn add expo // expo 있다면 생략 npx expo start 2. app store 에 가서 Expo Go 앱을 다운로드 받는다. → 터미널에 출력되는 QR 코드 실행 실행이 안된다면 추가 설치 1. Expo install brew update brew install watchman 2. Watchman intall brew update brew install watchman DESIGN BY TISTORY 관리자
[ React ] 단축키 플러그인 , Component 설명 → ES7+ React/Redux/React-Native snippets [ 함수형 컴포넌트 생성 단축키 ]1. rfce (React Funtion Component)→ 표준 함수 선언을 사용하여 컴포넌트를 정의한다.→ 함수 내부에서 this 를 사용할 수 있으므로, 클래스 컴포넌트와 유사한 방식으로 자체 상태(state)를 관리할 수 있다.→ 더 복잡한 컴포넌트나 생명주기 메서드가 필요한 경우, 함수 컴포넌트에 추가적인 로직을 더 쉽게 통합할 수 있다.import React from 'react' function ToDoList() { return ( ToDoList ) } export default ToDoList 2. rafce(React Arrow Function Component)→ 화살표 함수..
[ React ] JSX(JavaScript Xml) JSX(JavaScript XML) 은 React 에서 사용되는 JavaScript 의 확장문법이다.이는 UI를 표현하기 위한 React 요소를 생성하는데 도움이 되는 간편하고 가독성이 높은 문법을 제공한다.JSX 는 Javascript 코드 안에서 XML 또는 HTML 과 유사한 구문을 사용하여 작성된다.XML(Extensible Markup Language) const element = Hello, world!위의 예제에서 과 사이에 있는 부분이 JSX 이다.이것은 React 요소를 나타내며, 이는 React 가 가상 DOM을 사용하여 실제 DOM 업데이트를 최적화할 수 있도록 한다. JSX 특징과 이점가독성 향상: XML과 유사한 구문을 사용하므로 코드가 간결하고 가독성이 높아진다.표현력 향상: J..
[ React Native ]Tag React Native 에서는 JSX 를 사용하지만, 그 JSX 는 HTML 이 아니라 React 컴포넌트를 나타내는 것 이라고 생각하면 된다. JSX 사용되는 태그는 React Native 에서 해당하는 네이티브 컴포넌트로 변환되어 실행된다.JSX(JavaScript Xml) 간단한 예로,→ 대신에 React Native에서는 를 사용해 레이아웃을 구성한다.→ 대신에 를 사용하여 텍스트를 표시한다.→ 대신에 를 사용하여 텍스트를 표시한다.→ 이미지를 표시하려면 를 사용한다.→ 스크롤을 구현하려면 를 사용한다. : 리스트 데이터를 렌더링하는데 사용되는 컴포넌트 중 하나이다유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch) 하여 비효율을 해결할 수 있게 한다.효율적인 렌더링 : 화면에 보이는..

티스토리툴바