블로그

리액트 useEffect: 개발자가 알아야 할 네가지 팁 React useEffect: 4 Tips Every Developer Should Know 리액트 Hook에서 useEffect 함수를 어떻게 작성하면 좋을 지에 대해 짤막한 네 개의 팁을 공유하는 포스팅이다. 1. 단일 목적의 useEffect 먼저 useEffect는 단일 목적의 함수로 분리해야 한다. function App() { const [varA, setVarA] = useState(0); const [varB, setVarB] = useState(0); // 이렇게 하면 안된다! useEffect(() => { const timeoutA = setTimeout(() => setVarA(varA + 1), 1000); const tim..

jQuery 상태 관리 각각의 요소에 dataset으로 상태를 추가해서 관리한다. 이게 왜 문제일까? 요소 A, B, C 가 있다고 하자. B를 클릭하면 A와 C의 상태를 가져오고 데이터를 조합해서 API를 호출한 뒤 값을 갱신한다고 했을 때, API의 비동기 적인 결과를 받기 위해 대기하는 중에 A나 C의 상태가 변경이 된다면? 각각의 뷰에서 실시간, 비동기로 변화를 하게 되므로 제어하기가 힘든 상황이 올 수 있고, 결과적으로는 원하지 않는 결과가 나올 가능성이 생기게 된다. jQuery로 개발하는 경우는 결국 DOM에 상태를 저장하고, 각 요소가 상태를 가지고 있기 때문에 서로 다른 요소의 상태변화 추적이 어려운 문제가 생기게 된다. AngularJS AngularJS는 변경이 필요한 대상이 되는 요..

웹 개발 환경은 하루가 다르게 바뀌고 있고, 공부만 할게 아니라 트렌드에 대해 알아보는 점도 필요하다고 생각했다. 현재 코드스쿼드에서 사람들과 함께 어울리며, 바닐라 자바스크립트에만 집중하고 있다는 생각이 들었다. 물론 기본 기술이 중요하긴 하지만 이전 직장에서의 환경도 그렇고 일명 삼대장이라고 불리는 프론트엔드 프레임워크 또는 라이브러리를 튜토리얼 수준으로 밖에 경험해보지 못했기에 차후 학습을 위해 이러한 기술이 등장하게 된 상황을 이해하고 싶었다. 2년 전의 영상이었지만 기본적인 흐름을 파악하는데 도움이 됐다. 해당 세션의 발표자는 카카오페이의 개발자이며, 앵귤러 kr의 운영자인 한장현님이라고 한다. 유튜브 링크 https://www.youtube.com/watch?v=BXOH9b177ho&list=..