프론트엔드/React

React Effect Hook 이란?

Effect Hook 이란? 함수형 컴포넌트에서 사이드 이펙트를 만들 수 있도록 해주는 리액트 훅이다. useEffect() 와 같은 함수를 이용해 만들 수 있다. 기본적으로 DOM 리랜더링이 일어날 때마다 사이드 이펙트가 작동하며 컴포넌트가 화면에서 사라지면 return 에 작성해둔 clean up 함수가 실행된다. 두번째 파라미터에 배열로 state 값의 인자를 주면, 해당 값이 바뀌어 리랜더링이 될 때만 사이드 이펙트가 동작한다. 기존 클래스형 컴포넌트 라이프 사이클에서 componentDidMount 가 가지던 효과와 비슷하다. Effect Hook 과거와 현재 비교하기 카운트가 증가할 때마다, useEffect() 의 사이드이펙트에 의해 title 도 함께 수정되는 예제를 작성해본 것이다. 예전..

리액트 컴포넌트 밖 변수 선언의 의미 (Feat. 리액트에서 절대 하면 안되는 것 1가지)

리액트에서 절대 하면 안되는 것 리액트에서 절대 하면 안되는 것이 하나 있다. 컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다. 잘못된 코드 // import 생략 ... let count = 1; function WrongComponent() { const [_, setCount] = useState(1); const onClick = useCallback(() => { setCount(count++); }, []); return count: {count}; } export default WrongComponent; 문제 생각해보기 위처럼 코드를 작성하면, 위 컴포넌트를 페이지당 1개 쓸 때는 크게 문제가 없을 수도 있지만, 컴포넌트 밖 중복되는 이름의 let 변수가 있을 때 해당 변수..

React 컴포넌트 어떻게 나누고 재사용할 것인가?

컴포넌트를 어떻게 나눌 것인가? 현실에서 일어나는 일들 우리는 프로덕션을 개발하며 수많은 변경을 마주하게 된다. 이에 대해 현명한 대처가 필요하다. 이러한 이유는 뭘까? 현재의 제품이 완벽하지 않다. 사용자 입장에서 불편함이 있다. 만일 프로덕션이 변경될 일이 없다면? 현재의 제품이 완벽하다. 사용자 입장에서 불편함이 없다. 사실 제품이 변화하는 것은 놓쳤던 고객의 니즈를 발견하고 제품을 성장시키는 과정이다. 그리고 이러한 변경에 대응하는 것은 쉬운 일이 아니다. (특히 설계가 제대로 되지 않은 소프트웨어에서는 더더욱 그렇다.) 제품이 만들어지는 흐름 작은 역할을 하는 여러 개의 컴포넌트를 만든다 기능을 만들기 위해 컴포넌트를 합친다. 컴포넌트가 너무 커지면 적당히 분리한다. 위의 흐름은 틀리지 않았지만..

React Hook Form 이 해결하는 문제들과 사용법

기존의 React Form 코드 import React, { useState } from "react"; export default function NormalForm() { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [formErrors, setFormErrors] = useState(""); const onUsernameChange = (event: React.SyntheticEvent) => { const { currentTarget: { value }, } = event; setUsername(v..

React Hook Form 소개

React Hook Form 이란? 사용하기 쉬운 검증(validation), 뛰어난 성능, 유연성, 확장 가능성을 특징으로 하는 리액트 폼 생성 라이브러리이다. 특징 DX 직관적이며, 기능 완전한 API 를 제공한다. HTML Standard HTML 마크업의 장점을 극대화시키고 제약을 기반으로한 validation API 를 통해 form 을 검증한다. Super Light 다른 의존성을 추가로 안가져가는 가벼운 라이브러리이다. Less code. More Performant. Isolate Re-renders. 전체 코드의 양도 줄여주면서 불필요한 리렌더링도 없애준다. 재 렌더링을 최소화하고 검증에 드는 비용을 최소화하며 더 빠른 마운팅을 제공한다. 기존의 Controlled Form 방식과 비교했..