리액트4 useEffect 에서 object 타입 dependency 다루기(with:useAxios) 문득 useEffect를 너무 안일하게 사용하고 있다는 생각이 들었고 실제로 이슈가 발생했다. 이참에 완벽한 정리가 필요해보인다. useEffect에서 두번째 파라미터인 array dependency에서 object 타입을 다뤄보자 dependency array는 뭘까? 클래스형 컴포넌트에서 componentDidUpdate 함수로 이전 props와 다음 props를 비교하여 렌더링 여부를 결정할 수 있다. componentDidUpdate(prevProps, prevState) { if (prevState.count !== this.state.count) { // 이전값과 비교 다르면 렌더링 document.title = `You clicked ${this.state.count} times`; } } .. 2022. 4. 22. styled-components theme 타입 지정하기 styled-components 에서 global한 속성이나 테마를 지정해주고 싶을 때 ThemeProvider를 이용한다. theme 속성을 가져올 때 타입은 any타입으로 어떠한 타입이든 올 수 있다. 그래서 다음과 같이 작성할 때 theme의 속성이 나오지 않고 자동완성이 되지 않는다. const Style = styled.div` background-color: ${({ theme }) => theme.backgroundColor}; `; theme.ts const theme = { backgroundColor: '#332abd' } export { theme } app.tsx {children} 물론 속성이름만 맞는다면 아무 문제없지만 그렇지 않을 때 예기치 못한 오류를 발생시킬 수 있다. th.. 2022. 4. 12. Redux는 왜 쓰는 걸까?(1) Ref 다음 글들을 읽고 나름 제 생각을 정리한 것입니다. https://blog.isquaredsoftware.com/2021/01/context-redux-differences/#using-context Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) Definitive answers and clarification on the purpose and use cases for Context and Redux blog.isquaredsoftware.com Redux 는 왜 쓰는 걸까? 항상 기술을 사용할 때 이 기술이 어떤 문제를 해결하기 위해 나왔는지 아는 것은 매우 .. 2022. 2. 21. React에서 setInterval 작성하기 리액트 에서 setInterval을 작성해 봅시다. 오래전에 구현하느라 애먹었는데 이제야 글을 쓰게 되는군요.... 간단하게 코드를 보자면 import { useState } from "react"; import "./styles.css"; export default function App() { const[cnt, setCnt] = useState(0); const run = () => { setInterval(() => { setCnt(prev => prev + 1); }, 1000); } return ( {cnt} run ); } 버튼을 클릭할 시 count를 1씩 1초마다 증가시킵니다. 잘 작동됩니다. 하지만... 버튼을 계속 클릭하게 되면 숫자 카운트는 빠르게 증가합니다. 대체 왜 그럴까요? r.. 2021. 11. 22. 이전 1 다음
