본문 바로가기

FrameWork/React

 (9)
[React] 속성 이름을 동적으로 설정 ( 표현식, 변수의 문자열 또는 결과 값 ) 속성 이름을 동적으로 설정해야 할때, 대괄호 를 사용하여 속성 이름을 설정할 수 있다. 이 기능은 계산된 속성 이름(computed property name) 이라는 ES6의 기능이다. 이를 통해 변수나 표현식의 결과를 속성 이름으로 사용할 수 있다. const todayDate = new Date().toISOString().split('T')[0]; const [selectedDate, setSelectedDate] = useState('');
[React] 함수 매개변수와 외부 변수 간의 스코프(scope) 이렇게하면 const test ‘ message’ 를 직접 참조할때는 externalTest를 사용하고, 함수의 매개변수로 전달받은 test 를 사용할때는 그대로 test 를 사용할 수 있다. 매개변수는 함수에 입력값을 전달하는 데 사용된다. 함수가 어떤 작업을 수행하기 위해 필요한 데이터를 받아들이기 위한 매개변수를 정의한다. const externalTest = 'message'; const renderDayComponent = ({ date, selectedDate, test }) => { // 'test' 변수는 함수 내부에서는 매개변수로 전달된 객체의 test 속성을 가리킨다. // 함수 내부에서 외부의 const externalTest = 'message&#..
[React] 리액트에서 if문 , 조건부 렌더링 패턴 1. 삼항 연산자 (Ternary Operator) 가장 간단한 조건부 렌더링 패턴 중 하나 return ( {condition ? : } ); 2. && 연산자 && 연산자는 조건이 참일 때만 다음 값이 렌더링되도록 한다. return ( {isLoggedIn && } ); 3. 조건부 연산자 (Logical && Operator) JavaScript의 논리 연산자를 사용하여 조건에 따라 값을 반환할 수 있다. jsxCopy code return ( {isAdmin && } ); 4. 조건문 밖에서 렌더링 변수 설정 조건문 밖에서 변수를 설정하고, 그 변수를 사용하여 렌더링하는 방식이다. jsxCopy code let componentToRender; if (condition) { componentTo..
[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 ] 단축키 플러그인 , 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)→ 화살표 함수..

티스토리툴바