Jest를 사용해보자! - 3편

1. 3편은 버튼 클릭 시, Count 올라가는 걸 만들거야. 1편은 셋팅, 2편은 로그인 폼까지만 만드는 걸 했다. 이번엔 button을 클릭하면 숫자가 1씩 증가하거나 감소하는 컴포넌트를 만들고 테스트를 해보려고 한다. 2. 기본적인 세팅을 해보자. App.test.tsx 파일이 아닌 Counting.test.tsx 파일을 만들어주고, src 밑에도 Counting.tsx란 파일을 생성해주고 코드를 작성해주었다. // Counting.tsx import { useState } from 'react'; export function Counting() { const [count, setCount] = useState(0); const onIncrease = () => { setCount((prev) =>..

2023.10.30

[React] 1. React Hook

1. React Hook 이란? Hook은 React 버전 16.8 부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 " 연동(hook into) " 할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. 1) Hook 을 사용했을 때 장점 (1) 더 빠른 성능과 짧은 코드 양 (2) Wrapper 컴포넌트양 감소 (3) 하나의 컴포넌트를 생명주기가 아닌 기능을 기반으로 하여 작은 함수 단위..

2023.03.27