프론트엔드

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 에 접근하거나 배열을 조작 할 때 사..