본문 바로가기

전체 글

 (61)
[React] 함수형 업데이트 패턴 (최신 값 보장) 이전상태를 참조하는 함수형 업데이트를 사용할때, 해당 상태의 이전 값을 안전하게 참조하기 위해 매개변수를 사용한다. 매개변수를 사용하면 현재의 값이 아닌, 이전의 값을 가져온다. 직접 업데이트 배열을 사용하게 된다면 React 는 최신 상태를 보장하지 못할 수 있다. 이 매개변수는 개발자가 직접 선언하거나 초기화 할 필요 없이 React 가 이를 관리하며, 함수형 업데이트 패턴을 통해 이전 상태를 안전하게 참조하고 현재 상태의 값을 신뢰성 있게 참조하기 위한 메커니즘이다. [ 예제 ] import { useEffect, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Calendar } from..
[Javascript] [ this ] call , apply , bind Method [ this ] call , apply , bind Method [ this ] 현재 실행 중인 함수 또는 매서드 내에서 사용되며, 해당 함수 또는 메서드가 호출된 객체를 참조한다. this 값은 실행 컨텍스트에 따라 동적으로 바인딩 되며, 다양한 상황에서 다른 객체를 참조할 수 있다. 객체 내부에서의 메서드 호출 객체 내부의 메서드에서 ‘this’를 사용하면 해당 메서드를 호출한 객체를 참조할 수 있다. 이것은 주로 객체 지향 프로그래밍에서 주로 사용된다. const person = { name: 'John', sayHello: function () { console.log(`Hello, my name is ${this.name}`); }, }; person.sayHello(); // "Hello, m..
[Javascript] 이벤트 버블링 (with handleOutsideClick) _ event.stopPropagation() 이벤트 버블링 이벤트가 시작된 곳에서 상위 요소로 이벤트가 계속해서 전파된다. 따라서 아래의 예제에서 버튼을 클릭하면 handleOutsideClick 함수가 실행되어 메뉴가 열리지 않는( 닫아버리는) 문제가 발생했다 . 이를 해결 하기 위해 event.stopPropagation() 을 사용할 수 있었다. { selectMenu(); }} > KPI 이력 최신 버전 사용중 Version 1.0.0
[Javascript] Observer 패턴 ( 관찰자 패턴 for 업데이트 ) Observer 패턴 ( 관찰자 패턴 for 업데이트 ) 관찰자 패턴을 사용하여 데이터 변경을 감지하고 관찰자(옵저버)들에게 변경을 통지하고 업데이트 한다. Javascript 에서 데이터 변경을 감지하고 UI 를 업데이트하는 전통적인 방법이다. 스벨트킷 에서는 ‘$:’ 문법이 있다. class Observable { constructor() { this.observers = []; } addObserver(observer) { this.observers.push(observer); } notifyObservers() { this.observers.forEach(observer => { observer.update(); }); } } const data = new Observable(); data.add..
[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 관리자
[Javascript] 배열(Array) 반환 함수 & 메서드 [ Map (함수) : 결과를 반환 ] → 배열의 각 요소를 순회하며 해당 요소에 대한 변환 함수를 적용한 배열을 생성 한다. → 기존 배열은 변경되지 않으며 , 변환된 결과만을 포함 하는 새 배열을 반환한다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((num) => num * 2); // doubled는 [2, 4, 6, 8, 10]을 포함하는 배열입니다. [ Filter (함수) : 조건을 만족하는 요소를 반환 ] → filter 함수는 주어진 조건을 만족하는 배열의 요소 만을 남기고 나머지 요소를 제거, 새로운 배열을 생성. → 조건을 만족하지 않는 요소는 새 배열에 포함되지 않는다. → 즉 , 조건을 만족하는 요소만 새 배열에 포..

티스토리툴바