React

소개 FaceBook이 만든 쿼리 언어 https://graphql.org/ GraphQL | A query language for your API Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featu graphql.org Graphql 란? vs SQL → Server 와 Web Client 간의 질의어..

Redux 를 쓰는 이유 앱 상태가 React 만으로 관리하기 힘들 정도로 많아짐. → 상태를 외부로 빼내고, 변경점만 전파받고 싶음. → 외부 상태도 바인딩하고 싶은데… 어떻게?? 상태 관리 패턴의 분류 상태 변경을 감지하는 방식에 따른 분류 Flux-based 전역, 단일 저장소 사용 ex) react-redux의 최상위 Provider 컴포넌트 Action 실행을 제외한 상태 변경 제한. 단일 store 를 감시하므로 디버깅 기준이 action의 실행 ⇒ 전역 state 변경으로 유일해짐. Redux(Flux + Reducer) / Zustand (Flux + Context) Vuex (Flux for Vue) NgRx (Flux + Rx for Angular) Proxy-based State 재할..

Overview 테스트 코드는 필수다. 라는 식의 말을 많이 들어봤지만 막상 테스트 코드를 작성한 기억이 없습니다. 항상 에러가 어디서나는지 console.log() 를 찍으면서 확인을 했습니다. 너무 불편해서 이번에는 React에서는 어떻게 테스트 코드를 작성할지 공식문서에서 글을 읽고 실습해봤습니다. 테스트 코드 추천 도구 Jest는 JavaScript 테스트 러너입니다. DOM에 접근하게 하는 jsdom 을 통해서 테스트를 진행. jsdom은 단지 어떻게 브라우저가 작동하는지에 대한 대략적 개요입니다. 하지만 이는 종종 React 컴포넌트를 테스팅 하기에 충분합니다. Jest는 모킹과 타이머 같은 파워풀한 특징과 결합되어 훌륭한 반복속도를 제공합니다. 그래서 더 많은 제어 코드를 가집니다. Reac..

컴포넌트 상태 다루기 컴포넌트 -> 앨리먼트의 집합 ( ) useState -> 상태값을 다루는 훅 const [count, setCount] = useState(0); [!help] Hook 이란? Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 합니다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다. 컴포넌트 사이드 이펙트 다루기 사이드 이펙트 -> 부수 효과를 의도적으로 발생시킬 때 사용 useState -> lazy initialize 비용이 많이 드는 localStorage 에 접근하거나 배열을 조작 할 때 사..