Front-End Study89 최적화 웹 서비스의 구현에 필수적인 항목(서버 성능 개선, 로딩 속도 개선, 불필요한 재연산 방지, etc…) useMemo 특정 함수 호출 시 정해진 조건을 만족해야 호출될 수 있도록 하는 Hook // ex) // 첫번째 인수로 callback 함수를 넣고, 리렌더를 원하지 않는 연산을 작성 const {totalCount, doneCount, notDoneCount} = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, no.. 2024. 2. 21. useReducer 컴포넌트 외부에 State 관리 로직 분리✅ 로직 useState()와 거의 동일 import { useReducer, useState } from "react" function Reducer(state, action) { // Reducer 함수 if(action.type === "DECREASE"){ return state - action.data; } else if(action.type === "INCREASE"){ return state + action.data; } } export default function B() { // count는 State값, dispatch는 type과 data와 같은 action값 const [count, dispatch] = useReducer(Reducer, 0.. 2024. 2. 20. React Custom Hooks 🚫 React Hooks는 일반 함수에서 호출할 수 없다. -> Component 내부 or ==또다른 React Hook(Custom Hook 제작 후 로직 분리)==에서만 가능 // Custom Hook 만드는법 // 이름 앞에 use를 붙여 Custom Hook으로 인지시키기 // useInput.js import { useState } from "react"; export default function Input(){ const [value, setValue] = useState(); // 부모로부터 value와 onChangeText를 받아옴 const onChangeValue = (e) => { setValue(e.target.value); }; return [value, onChangeVal.. 2024. 2. 20. 리액트의 라이프 사이클 기본적으로 라이프 사이클이란 탄생부터 죽음까지의 과정을 의미 리액트 : Mount(렌더링된 순간) -> Update(리렌더) -> Unmount(화면의 컴포넌트 제거)의 과정 1. Mount : 서버에서 데이터를 불러옴 2. Update : 변경된 값이 무엇인지 콘솔 출력 3. Unmount : 컴포넌트가 사용하던 메모리 정리 및 해제 리액트의 "useEffect"를 이용해 쉽게 제어 가능 useEffect 라이프 사이클을 쉽게 제어하는 리액트의 내장 훅 기본적으로 화살표 함수 선언 후 배열(의존성 배열 Deps)에 출력할 값을 넣는 식으로 작성 import { useEffect } from 'react' function App() { const [count, setCount].. 2024. 2. 17. State로 사용자 입력 관리하기, Ref로 요소 지정하기 export default function Body(){ const [name, setName] = useState(""); // 빈 문자열 초기값으로 지정 function onChangeName(e) { setName(e.target.value); // input 태그가 변경되는 이벤트가 호출될 함수 호출 } return( ) } useState를 사용하여 각각의 value값 지정 및 입력값 관리 export default function Body(){ const [name, setName] = useState(""); const [gender, setGender] = useState(""); const [bio, setBio] = useState(""); // 각각의 입력폼마다 useState 지정 .. 2024. 2. 15. State 지속적으로 변화하는 값(컴포넌트 내에서 변화를 주도) import { useState } from 'react'; export default function Body(){ const [Light, setLight] = useState('OFF'); // 새로운 State 생성, 문자열"OFF"생성(초기값) // Light = state 값, setLight = 상태변화함수(state 값의 변화) return( body {Light} { setLight("ON"); // 상태변화함수 호출 후, state값의 문자열 변경(인수 전달) }} >켜기 { setLight("OFF"); // 위와 동일 }} >끄기 } -> 이렇게 값이 변경 가능한 이유 : 리액트가 컴포넌트의 값이 바뀔 때마다 렌더링을 다시하기 때.. 2024. 2. 15. 이전 1 ··· 6 7 8 9 10 11 12 ··· 15 다음