![]()
atomFamily 1. atomFamily - Recoil에서 제공하는 중요한 개념 중 하나로, 동적으로 생성되는 상태를 처리하는 데 사용 - 동적으로 생성되는 상태에 대한 일반적인 패턴을 쉽게 구현 가능 2. 사용방법 import { atom, atomFamily } from 'recoil'; // atomFamily를 사용하여 동적으로 생성된 상태를 정의 const noAtomFamily = atomFamily({ key: 'noAtomFamily', // 고유한 키를 제공 default: (no) => no, // 상태의 기본값을 설정 }); // atomFamily를 사용하여 여러 상태를 생성 const noAtom1 = noAtomFamily('no1'); const noAtom2 = noAt..
![]()
Atoms 1. Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 2. 예시 - RecoilEx.js import React, { useState } from "react"; import { Button } from "@mui/material"; import { atom, useRecoilState } from "recoil"; const page1NoAtom = atom({ key: "RecoilEx/page1NoAtom", default: 0, }); const page2N..
![]()
Recoil 1. Recoil - Facebook에서 개발한 React 애플리케이션의 상태 관리 라이브러리 - React 애플리케이션에서 상태를 관리 및 공유하는 데 도움을 주는 도구 - 컴포넌트 간에 데이터를 전달하고 업데이트하기위한 간편한 방법을 제공 2. Recoil의 주요 특징 및 개념 - Atoms - Recoil에서 가장 중요한 개념 중 하나 - 애플리케이션의 상태를 나타내는 단위로, 전역적으로 공유되어야 하는 데이터를 저장하는데 사용 - 각 atom은 고유한 키를 가지며, 초기 상태를 가질 수 있음 - Atom은 읽기 및 쓰기 작업을 할 수 있는 상태를 나타냄 - Selectors - atom에서 파생된 값을 계산하고 반환하기 위한 함수 - 다른 atom or 다른 selector를 기반으로..
![]()
findIndex 함수 1. findIndex( ) 함수 - 배열 내에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 찾는 데 사용되는 배열 메서드 - 콜백 함수를 이용하여 요소를 검색하며, 조건을 만족하는 요소를 찾으면, 해당 요소의 인덱스를 반환 ※ 조건을 만족하는 요소가 없을 시, -1을 반환 2. 예시 const todos = [ { id:10, content:"운동", }, { id:5, content:"목욕", }, { id:2, content:"공부", }, ]; function removeTodo(deleteIndex) { // index가 deleteIndex와 다른 것 들만 반환 return todos.filter((_, index) => index != deleteIndex); }..
![]()
인터넷 (Internet) 1. 인터넷 (Internet) - 글로벌 네트워크로서 수많은 컴퓨터와 기기들을 연결하여, 정보 교환 및 공유하는 시스템 - 인터넷 프로토콜 스위트(TCP/IP)를 기반으로 하여, 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 2. 인터넷의 작동 원리 - 클라이언트-서버 모델 - 인터넷 서비스의 기본 구조 - 정보와 서비스를 제공하는 측면과 서비스를 요청하고 사용하는 측면을 분리하여 구성 - 네트워크 상에서 데이터 및 리소스를 효율적으로 관리하고 분배하는데 사용 - 클라이언트-서버 모델의 주요 요소는 다음과 같음 요소 설명 클라이언트 - 일반적으로 사용자가 사용하는 기기(ex : 컴퓨터, 스마트폰 등)로서 서버에 정보를 요청하고 받는 역할 서버 - 정보를 저장하고 클라이언..
![]()
fill 함수 1. fill( ) 함수 - 배열의 모든 요소를 지정한 값으로 채우는 메서드 - 원본 배열을 변경하며, 새로운 배열을 반환하지 않음 2. 구문 - value : 배열의 요소를 채울 값 - start : 채우기가 시작될 인덱스 (기본값 : 0) (선택 사항) - end : 채우기가 종료될 인덱스. 즉, 이 인덱스의 요소는 포함되지 않음 (기본값 : array.length) (선택사항) array.fill(value[, start[, end]]) 3. 예시 const numbers= [1, 2, 3, 4, 5]; // 2번째 부터 4번째까지 0으로 변경 numbers.fill(0, 1, 4); console.log(numbers);
![]()
every 함수 1. every( ) 함수 - 배열의 모든 요소가 주어진 조건을 만족하는지 확인하고 boolean 값을 반환 - 배열의 모든 요소가 조건을 충족할 때만, 'true'를 반환 - 조건을 만족하지 않는 요소가 있다면 'false'를 반환 2. 예시 // 모든 숫자가 짝수인지 확인 const numbers = [2, 4, 6, 8, 10]; const allEven = numbers.every(number => number % 2 === 0); console.log(allEven); // true // 모든 단어가 'a'로 시작하는지 확인 const words = ['apple', 'banana', 'cherry', 'watermelon']; const allStartWithA = words...
![]()
useCallback 1. useCallback - React의 Hook - 함수 컴포넌트 내에서 함수를 Memoization하고 재사용하기 위해 사용되는 도구 - 불필요한 함수 재생성을 방지하고 성능을 최적화할 수 있음 - 일반적으로 React 컴포넌트 내에서 함수 정의 시, 컴포넌트 리렌더링될 때마다 새로운 함수 인스턴스가 생성 → 이는 성능 저하를 초래하여, 이 문제를 해결하기 위해 useCallback을 사용 → 함수를 캐싱하고 이전에 생성된 함수 인스턴스를 재사용함 2. 예시 - App.js import React, { useState, useCallback } from "react"; import "./App.css"; let SubCallCount = 0; function Sub({ no1,..
![]()
React.memo 1. React.memo - React에서 사용되는 성능 최적화를 위한 기능 - 컴포넌트가 이전에 렌더링한 결과를 기억하고, 동일한 속성(props)로 다시 렌더링될 때, 이전 결과를 재사용할 수 있음 - 부모 컴포넌트가 업데이트되더라도, 컴포넌트의 속성이 변경되지 않았다면, React.memo를 사용해 불필요한 렌더링을 방지하고 성능을 향상시킴 2. 사용방법 import React from 'react'; const MyComponent = React.memo(props => { // 컴포넌트 렌더링 로직 }); export default MyComponent;
![]()
useMemo 1. useMemo - React의 훅 중 하나로, 성능 최적화를 위해 사용 - 계산 비용이 높은 함수 결과를 이전 계산 결과와 비교해, 이전 결과와 동일하다면 이를 재사용하여, 렌더링 성능 향상 2. useMemo 구문 - dependency 들은 이 함수가 의존하는 값들을 나타냄. → 의존성 값들이 변경되었을 때만 다시 실행되고, 그렇지 않으면 계산한 결과를 재사용 const memoizedValue = useMemo(() => { // 계산 비용이 높은 작업 수행 return result; }, [dependency1, dependency2, ...]); 3, 예시 - App.js import React, { useState, useMemo } from "react"; import "..
![]()
filter 함수 1. filter( ) 함수 - 배열(Array) 객체의 메서드 - 배열 내의 요소들을 특정 조건에 따라 걸러내어, 새로운 배열을 생성하는 데 사용 2. 예시 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const evenNumbers = numbers.filter(function(number) { return number % 2 === 0; }); console.log(evenNumbers);
![]()
useRef 1. useRef - React 라이브러리에서 제공하는 훅(Hook) - 함수형 컴포넌트 내에서 DOM 요소 or 값을 참조할 때, 사용되는 도구 - 이를 통해, 컴포넌트의 렌더링 사이클과는 독립적으로 값을 저장 및 유지 가능 → useState와 달리, 리렌더링을 하지 않고 값을 저장 및 유지함 2. 예시 - RefEx.js import React, { useState, useRef } from "react"; function RefEx() { const formInputNoRef = useRef(null); const [no, setNo] = useState(""); const notice = () => { formInputNoRef.current.focus(); if (!no) { al..
![]()
focus 함수 1. focus( ) 함수 - HTML 요소에 포커스를 설정하는 메서드 - 사용자가 키보드 or 마우스 등을 사용하여, 상호작용할 때, 해당 요소에 집중되는 것을 의미
![]()
trim 함수 1. trim( ) 함수 - 문자열의 앞과 뒤에 있는 공백(space, tab, 줄바꿈 등)을 제거하는 메서드 - 문자열을 가공할 때, 유용하게 사용 가능 2. 예시 const str = " Hello, World! "; const trimmedStr = str.trim(); console.log(trimmedStr); // "Hello, World!"
![]()
preventDefault 함수 1. preventDefault( )함수 - JavaScript에서 이벤트 처리를 제어하는 데 사용되는 메서드 - 주로 웹 페이지에서 발생하는 기본 동작(URL 이동, 페이지 세로고침 등)을 막고자 할 때, 사용 - 이는 이벤트 객체에 속한 메서드이며, 이벤트 처리 함수내에서 호출됨 - 호출 시, 해당 이벤트의 기본 동작이 막히게 되며, 이후 원하는 동작 수행 가능
