Web/React14 React Hook Form 가이드 기존에 React Hook Form을 쓰면서도 잘 모르고 썻던 기능들을 정리하고 가이드 하고자 합니다. 공식문서 시작하기 시작하기 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com API API 설명서 API 설명서 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React Hook Form이란? React에서 form의 validation을 빠르고 쉽게 도와주는 라이브러리이다. 전체 폼이 리랜더링 되지 않으면서도 각각의 입력값 변화를 관찰할 수 있기에 성능도 빠르고 의존성 없이 .. 2022. 8. 2. TDD란? React Testing Library 사용법 TDD 왜 TDD를 해야 할까? 테스트 코드가 없는 프로젝트의 경우 무엇을 개발해야 하는지 명확히 모른채 개발을 하게 되며 추후 코드 변경에 따른 버그를 예측할 수 없다. TDD란? TDD는 문제를 먼저 정의한 후 문제의 해답을 찾아가는 방식이다. 실패(Red), 성공(Green), 리팩토링(Refactoring) 이라 불리는 3단계를 반복한다. 실패: 문제 정의 단계로, 테스트 코드를 실제 코드보다 먼저 작성 성공: 문제 해결 단계로, 테스트를 통과할 수 있는 최소한의 코드를 작성 리팩토링: 불필요하고 비효율 적인 코드를 개선 문제 정의를 위한 Tip (뱅크샐러드 - 테크 스펙) 뱅크샐러드의 특별한 스펙, '테크 스펙' | 뱅크샐러드 테스트 범주 테스트 코드는 내가 만든 기능의 주요 핵심이 무엇인지 파.. 2022. 4. 25. React에서 Styled Component 사용법 Styled-Components 사용법 특징 자바스크립트 파일 안에 CSS를 작성하는 형태 (emotion과 대체 가능) .css파일을 따로 만들지 않아도 된다. props나 자기 자신 특정 가능. 환경 설정 $ yarn add styled-components 예제 코드 import React from 'react'; **import styled, { css } from 'styled-components';** const Box = styled.div` /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */ background: **${props => props.color || 'blue'};** padding: 1rem; display: flex; `; const Button = styled.. 2022. 4. 22. React 상태관리 Mobx 정리 및 사용법 Mobx 개념 정리 및 사용법 1-1. MobX의 주요 개념 1) Observable State (관찰 받고 있는 상태) 상태의 변경이 잇으면 Mobx에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악한다. 2) Computed Value (연산된 값) 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값으로 성능 최적화를 위해 사용된다. 어떤 값을 연산할때, 연산에 기반되는 값이 바뀔때만 새로 연산하고, 바뀌지 않았다면 기존의 값을 사용한다. (vue에서 computed와 비슷한거같음..) 3) Reactions (반응) 값이 바뀜에 따라 해야 할 일을 정한다. 즉, observable state의 내부 값이 바뀌면 따로 설정해둔 할 일을 실행한다. 4) Actions (액션; 행동) 상태에 .. 2022. 4. 22. 이전 1 2 3 4 다음
