반응형

react 리팩토링 3

React 리팩토링 - window.location.reload() 사용 하면 안되는 이유

window.location.reload()를 사용하면 전체 어플리케이션이 리로드 되면서 모든 상태가 초기화된다즉 리액트에서 해주는 모든 상태 관리가 무의미해진다.로그인 상태를 관리하려면 useState, useContext, Redux를 이용해 로그인 상태 관리가 가능하다. 잘못 사용하면 코드가 아래와 같다.function LoginPage() { const [user, setUser] = useState(null); const login = async () => { const userData = await fakeLoginAPI(); // 가짜 로그인 API 호출 setUser(userData); window.location.reload(); // 😡 이렇게 하면 상태 관리가 무..

카테고리 없음 2025.03.12

React 리팩토링 - props를 state처리하지 않기

Before문제점1. 불필요한 useState 사용 - name은 부모로부터 제공되는 props입니다. 변경될 일이 없으므로 상태 관리가 필요하지 않습니다.2. 중복된 상태 관리 - props 자체를 관리하는 useState는 불필요한 복잡성을 늘립니다.3. 직관적이지 않음 - state와 props 사이의 관계를 혼동할 수 있습니다.import React, { useState } from 'react';function Greeting({ name }) { // props를 useState로 저장 const [greetingName, setGreetingName] = useState(name); return Hello, {greetingName}!;}export default Greeting; Af..

카테고리 없음 2025.01.15

React 리팩토링 - 업데이트 되지 않는 값

리팩토링 전문제점: log 객체가 렌더링 될 때마다 새로 생성되기 때문에 내부의 상태 변화가 유지되지 않습니다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기 객체 선언 const log = { update: 0, }; const handleIncrement = () => { setCount((prev) => { log.update += 1; // 업데이트가 제대로 되지 않음 console.log(log); return prev + 1; }); }; return ( Count: {count} ..

React 2025.01.14
반응형