useState (5) 썸네일형 리스트형 Refactoring React(리팩토링 리액트) : useState 복잡한 상태는 유지보수를 어렵게 하는 원인입니다. 상태를 리팩토링하여 애플리케이션의 확장성을 향상시켜 봅니다. 해당 게시물의 목표는 다음과 같습니다. 코드를 더 쉽게 읽고 유지보수 쉽게 하기 버그에 덜 취약한 코드 만들기 코드의 복잡성 제거하기 애플리케이션 성능 향상시키기 1. 너무 많은 상태(Redundant State) fullName은 firstName과 lastName으로부터 파생됩니다. const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [fullName, setFullName] = useState(""); 해당 파생 상태는 의존성을 개발자가 직접 추적하여 업데이트를 같.. useState에 대해 좀 더 잘 알아보기 #3: Things to know about useState #4: useState for one-time initializations 두 게시물을 짬뽕해서 정리함. 1. 함수형 업데이터 클로저를 사용하여 setState 함수를 호출할 시, 배치 처리되는것 같은 느낌을 줍니다. 이는 우리의 의도와 다를 수 있습니다. 함수형 업데이터는 매 setState호출마다 이전 호출 결과 상태를 사용할 수 있게 해줍니다. 기존 클로저를 사용한 업데이트 : 결과는 항상 1 증가합니다. function App() { const [count, setCount] = React.useState(0) return ( { setCount(count + 1) setCount(count + 1) }} > 🚨 This will not.. useState의 함정 : useEffect와 사용 시 주의할 점. useState를 너무 많이 사용하지 않기 단일 진실 원천 - 파생된 상태를 저장하기 위한 상태 피하기 상태란 무엇인가요? 공식문서에 따르면 각 데이터 조각에 대해 세 가지 질문을 합니다. 1) props를 통해 부모로부터 전달됩니까? 그렇다면 아마도 상태가 아닐 것입니다. 2) 시간이 지나도 변함없나요? 그렇다면 아마도 상태가 아닐 것입니다. 3) 컴포넌트의 다른 상태 또는 prop을 기반으로 계산할 수 있습니까? 그렇다면 상태가 아닙니다. 3번 케이스에서 주의할 점 : 비동기 데이터를 이용한 파생 상태를 state에 저장하지 않습니다. useEffect는 상태를 React 외부의 요소(서버, 브라우저 스토리지 등)와 동기화 하는 경우에만 사용합니다. import { fetchData } from '.. useState와 useReducer의 사용사례 TL;DR: useState : 간단한 상태. 상태가 같이 업데이트 되야 하는지를 고려하여 묶고 분리한다. useReducer : 서버 상태와 섞여있는 경우, 로직 구현 시 상태 간 종속성이 필요한 경우. 복잡한 로직. 어떤 상태가 함께 속하는지(업데이트 되어야 하는지) 추론할 수 있는 방식으로 코드를 구조화하면 성능 문제와 상관없이 장기적으로 가독성과 유지 보수에 도움이 됩니다. 별도의 useState 상태가 독립적으로 업데이트되는 경우 ex) 성과 이름 // asis state = { firstName: '', lastName: '', } // tobe const [firstName, setFirstName] = React.useState('') const [lastName, setLastName] .. [Epic React] useState에서 useReducer로 useState와 useReducer의 차이는 setState 대신 newState를 만드는 함수를 직접 정의할 수 있다는 것이다. const [count,setCount] = useReducer(countReducer,0) function countReducer(prevState,newState){ return newState } const [count,setCount] = useState(0) // 똑같이 동작한다 setCount(count+1) 어 그럼 지금까지 redux 만들면서 작업했던 switch - action 구문은 뭐에요? -> 이전 상태(+타입)에 따라 다음 상태를 만드는 작업을 setState가 아닌 reducer함수에서 구현했을 뿐. -> 리턴하는 것은 동일하게 다음 state다 r.. 이전 1 다음
