[React] 9. useMemo (최적화)

useMemo (Memoization)최초로 계산하였을 때의 값을 메모리에 저장하고 동일한 계산에 대해서 각자 계산하는게 아닌 첫 번째 계산한 후 저장한 메모리에서 가져옴-> 불필요한 연산을 방지해줌(연산 줄임)import { useMemo, useReducer, useState } from "react";function Exam() { const [count, setCount] = useState(0); const [value, setValue] = useState(1); // 복잡한 연산 const expensiveCalculation = (num) => { console.log("⚡ 계산 중..."); let result = num * 2; for (let i = 0; i ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 8. useReducer

useReducer기존에 컴포넌트 내부에서 상태 관리 코드를 컴포넌트 외부에서도 할 수 있게 해주는 기능 여러개의 상태, 객체, 로직을 한꺼번에 관리하거나 코드를 분리할 때 많이 쓰게 됩니다. 특징 중 하나는 일반적으로 가독성을 위해 switch 문을 많이 씁니다. (if문 써도 무관) import { useReducer } from "react";function counterReducer(state, action) { switch (action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; case "RESET": return 0; ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 7. useEffect

useEffect useEffect의 경우 렌더링이 발생할 때마다 동작하게 할 내용을 적을 때 쓰기 때문에useEffect 를 통해 동작하는 내용이 많아지면 크게 속도가 떨어지니 useState 또는 useRef 로 해결되지 않는 경우에만 사용하여야한다.  또한 렌더링 발생마다 이므로 effect가 존재하는 화면에 처음 들어갈 때도 동작을 한다.import './App.css'import InputText from './components/InputText'function App() { return ( )}export default App import { useEffect,} from "react";import useInput from "../Hook/useInput";con..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 6. 리액트의 생명주기(Life cycle)

일반적인 코딩에서 배우는 전역변수 지역변수의 생명주기가 아닌 React 에서 나오는 생명주기에 대해 작성하고 있습니다 .Life cycle생명주기에는Mount (생성)Update (변경)Unmount (제거)순으로 진행됩니다.MountMount는 화면이 처음 렌더링 되는 그 순간을 의미하는데 자세하게는 이런식으로 동작합니다.코드가 실행되어 렌더링까지의 내용이며,이 과정을 통해 리액트는 화면에 컴포넌트를 출력하고 있습니다.UpdateUpdate는 이름 그대로 변경 사항에 대하여 변경하는 내용으로 위와 같이 동작합니다.즉 리렌더링을 의미하며 이 과정을 통해 리액트는 변경된 내용을 적용하여 출력합니다(중간에 렌더링 할 지 하지 않을지 구분은 Ref , State 생각하시면 됩니다.)Unmount 더 이상 사용..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms

[React] 5. Hook

리액트는 과거 버전에서 UI를 만들 땐 Function 컴포넌트 , 기능을 만들 땐 Class 컴포넌트로 분류하여 작성하였으며  당시에는 State , Ref 라는 기능으로 사용이 되었으나 이제는 Hook 을 통해 Class 컴포넌트로 사용되던 기능들을 낚아채 Function으로 가져간다는 의미로 Hook 이라고 부른다.  Hook 으로 만들어진 것들은 모두 use 가 앞에 붙는 형태로 이루어져 있습니다. (useState , useRef 등등)(단, 이런 Hook 들은 함수 컴포넌트 내부에서만 호출 가능, 조건문(반복문) 내에선 불가능함. ) 또한 기존의 State , Ref가 아닌 내가 필요로 하는 기능을 제작해 만들 수 있는데 이걸 Custom Hook이라 부른다.  예시로 import { useR..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms

[React] 4. useRef

앞의 useState 는 동적인 데이터에 대해 update 가 발생하면 렌더링이 발생하는 반면useRef 의 경우 렌더링 없이 값을 변경한다. 단, 화면에 즉각적으로 보여줘야 할 경우 useState ,값이 변경 되는건 맞지만 화면에 반영하지 않는 내용일 경우 useRef 를 쓴다고 생각하면된다. 예를 들어서 화면에는 보이지 않는 키 값이나 boolean 같은걸 저장하는 변수로 쓰기 좋다 .  count 코드를 재사용해서 보게 된다면  import { useRef, useState } from 'react'import './App.css'import Input from './components/Input'function App() { const [count, setCount] = useState(1);..

• format_list_bulleted JavaScript/React
• · 2025. 2. 13.
• textsms