상태 함께두기State Colocation will make your react app fasterPhoto by Samuel Zeller 원 글은 https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster 입니다. State Colocation(공존)이 여러분의 app을 유지하기쉽게 뿐만 아니라 빠르게 만들어 주는 방법. 리액트 application을 느리게 만드는 원인중 주요한 것 중 하나는 전역 state 이고, 특별하게는 급변하는 상태들입니다. 이것을 설명하기 위해 제가 작은 예시를 꾸며낸것을 이해해주세요, 그리고 저는 조금 더 현실적인 예시를 드리고 여러분은 어떻게 실용적으로 당신의 앱에 적용될수 있을지 결정할 수 있을것입니다.https://ideveloper2.dev/blog/2019-10-12--state-colocation-will-make-your-react-app-faster/Javascript Colocation (번역글) 🤔이 포스트는 아래 출처의 글을 번역한 글입니다. 의역과 오역을 자주 사용합니다. 우리 모두는 유지보수가 쉬운 코드를 원합니다. 그래서 우리는 코드를 유지보수가 쉽고 이해하기 쉽게 만들기 위한 최선의 의도와 함께 시작을 합니다. 시간이 지나고 코드가 커질수록 의존성을 관리하기는 어려워 집니다. 프로젝트가 커질 수록 코드가 '사소한 지식'이 되고 '기술 부채'에 기여하는 코드의 양은 증가해져 갑니다.https://dkrnfls.tistory.com/408react-hook-form을 선택한 이유와 적용 과정안녕하세요, 인프랩의 프론트엔드 개발자 홍시입니다. 이번 글에서는 팀원들과 함께 IT 채용 플랫폼 랠릿 의 프로필·지원서 기능을 react-hook-form으로 리팩토링한 경험을 공유하려고 합니다 :) 앞서 보셨던 글에서처럼 인프랩 프론트엔드 팀은 몇 백개의 form이 한 페이지에 있어 발생하는 렌더링 문제를 해결하기 위해 colocation과 ref를 이용했으나, 이 방법이 야기하는 또 다른 문제들을 마주했습니다. colocation이란?https://tech.inflab.com/202207-rallit-form-refactoring/react-hook-form/(번역) 리액트 폼 성능 개선원문: https://epicreact.dev/improve-the-performance-of-your-react-forms/ 좋은 글을 작성해주신 Kent C. Dodds와 한국어 번역을 허락해 주신 Epic React 팀께 감사드립니다. 폼은 웹에서 큰 부분을 차지합니다. 사용자가 백엔드 데이터를 변경하기 위해 수행하는 모든 상호 작용은 form 을 사용해야 합니다. 어떤 폼들은 간단하지만 현실에서는 빠르게 복잡해집니다.https://velog.io/@superlipbalm/improve-the-performance-of-your-react-forms 제어 및 비제어 컴포넌트velog.iohttps://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0폼 - ReactHTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받습니다. 이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다.https://ko.reactjs.org/docs/forms.html#controlled-components제어 컴포넌트 vs 비제어 컴포넌트react에서 제어 컴포넌트, 비제어 컴포넌트를 고려하여 form을 다루어야 하는 경우가 있었다. 제어 컴포넌트, 비제어 컴포넌트에 대한 개념이 없었고 이전에 formik을 다루었었던 경험이 있어서 습관적으로 제어 컴포넌트 형식으로 구현을 했었다. 그래서 제어, 비제어 컴포넌트에 대해 알아보려고 한다. 값이 바뀔때마다 매번 렌더링을 하게 된다.https://dkrnfls.tistory.com/248 React.memoReact 최상위 API - ReactReact 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있습니다. React 컴포넌트는 React.Component 또는 React.PureComponent 로 세부적으로 나누어 정의할 수 있습니다. ES6 class를 사용하지 않는다면, create-react-class 모듈을 대신 사용해도 됩니다. 자세한 정보는 ES6 없이 React를 사용하기 문서에서 확인할 수 있습니다.https://ko.reactjs.org/docs/react-api.html#reactmemo 나의 폼은 비제어 컴포넌트, 불필요한 리렌더링을 방지하기 위함이다. 단, 각각의 인풋 필드로 상태 관리 및 유효성 검사를 위임하여(state colocation)유저의 입력에 즉각적인 반응을 보이도록 한다. useRef변경은 관리해야 하지만 리렌더링을 발생시키지 않아도 되는 값[React] useRef 사용법 및 예제useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용이 되는 React hooks입니다. Ref는 'reference'의 약자로, '참조'라는 뜻입니다. DOM 요소를 참조해서 이렇게 지었을까요? 저장공간이라 하면 보통 State가 떠올를 텐데 State의 값을 바꿀 때 대표적으로 hooks의 useState를 이용합니다. React 컴포넌트는 State가 변할 때마다 다시 렌더링이 되면서 컴포넌트 내부 변수들이 초기화가 됩니다.https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C
![[React] useRef 사용법 및 예제](https://www.notion.so/image/https%3A%2F%2Fitprogramming119.tistory.com%2Ffavicon.ico?table=block&id=f263b218-d6c3-4f80-a6b6-5e0143a00ad9&cache=v2)
![[React] useRef 사용법 및 예제](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252FcG46yR%252FbtrxwYbnI2N%252Fya6gxNGF2n2BmqUlusKH9k%252Fimg.png?table=block&id=f263b218-d6c3-4f80-a6b6-5e0143a00ad9&cache=v2)