[React hook form] 제어 컴포넌트와 비제어 컴포넌트 동시에 사용하기

출발점 Reack hook form은 form 을 만들때 쓰는 대표적인 라이브러리 입니다. form 구조 떄문에 어쩔 수 없는 많은 state로 부터 우리를 지켜주는 존재입니다. 또한 그에 따른 리렌더링 문제로 부터 자유롭게 해줍니다. Reack hook form는 대표적으로 비제어 컴포넌트를 사용하긴 하지만 제어 컴포넌트로도 form을 만들 수 있게 하는데요 오늘 만들어보는 form은 react hook form을 사용해 사용자가 문자를 입력할때 마다 적합한 input인지 확인하기 위해 제어 컴포넌트로 만들고 굳이 입력할 때마다 유효성 검사가 필요없는 input에 관해서는 비제어 컴포넌트로도 만드려고 합니다. 1. (Controlled Component)제어 컴포넌트란? 제어 컴포넌트는 React st..

→2024.04.03

Frontend

[React] 재조정(Reconciliation)과 key값

프로젝트에서 DatePicker를 직접 구현하게 되었다. 화살표 아이콘을 누르면 한달씩 뒤 또는 앞으로 넘어가는 구조이다. date-fns 라이브러리를 사용해서 날을 생성했고 다음달 이전달로 넘어갈때마다 날짜들을 재조정 시켜주었다. 이때 문제가 발생했다. 달이 바뀔 때 마다 다시 렌더링 될때 정상 값들이 아닌 이상한 값들이 달력에 껴있던 것이였다. 몇번 달을 이동하다 보면 첫째주에서 시작해야할 1일은 다른 주에서 나오기 시작했다. 콘솔에 찍어보니 값은 정확했다. 문제는 key 값이었다. 코드를 보니 key값을 중복값으로 입력하고 있었다. const DatePickerModal = () => { useEffect(() => { editCurrentMonth(selectedDate); }, []); cons..

→2024.03.21

git

기본적인 git 사용 패턴 정리

예전에 멋사 운영진을 할때 github 세션을 했었는데 관련 내용을 공유합니다. git과 github의 차이 git 오픈 소스 버전 관리 시스템(Version Control System) 로컬에서 버전 관리 소프트웨어 개발 및 소스 코드 관리 인터넷이 필요 없다 github git을 사용하는 클라우드 서비스 git repository를 위한 웹 기반 호스팅 서비스 repository : 저장소 local : 자신의 컴퓨터 origin : 원격 저장소(깃허브 페이지) 첫번째 자신의 repository만들어 보기 자신의 프로필에서 [repository]→ [New]버튼 레포지토리를 만들어봅니다. 그리고 바탕화면에 폴더하나를 만들겠습니다. 저는 웬만하면 repository와 같은 이름으로 만드는걸 추천 드릴게..

→2024.02.29

Frontend

[React] 불필요한 리렌더링을 막아서 6배가 빨라졌다고?

현재 프로젝트에서 calendar 컴포넌트를 맡고 있다. calendar 컴포넌트에는 추가한 일정들을 볼 수가 있다. 각 일정들을 클릭하면 일정 상세보기 모달이 나온다.일정이 2개를 초과하면 더보기 버튼이 생기는데 클릭하면 달력이 미쳐 나오지 못한 일정이 모달을 통해 나오게 되는 구조이다. 일단 구현은 완료하였다.하지만 거슬리는 부분이 있다.불필요한 너무 많은 곳에 리렌더가 일어나는 것이다.물론 아직까지는 크기가 작은 프로젝트라 이대로 가도 괜찮을 것 같지만 찜찜한 이 마음을 풀기위해 더 좋은 방법을 생각해보기로 했다. 🔥 문제점1. recoil로 modal 상태 관리현재 modal을 열고 닫는데는 recoil을 사용중이다. export const moreModalState = atom({ key: "..

→2024.02.22

TIL

React 코드로 보는 S.O.L.I.D 객체 지향 설계의 5가지 원칙

개발을 하다보면 한번 쯤은 SOLID 원칙을 한번 씩 들어보았을 거라고 생각합니다. 프로그래머가 시간이 지나도 유지 보수와 확장이 쉬운 시스템을 만들고자 할 때 이 원칙들을 적용할 수 있는데 오늘은 직접 예제코드를 통해 SOLID 객체 지향 설계가 정확히 무엇인지 알아보는 시간을 가져보려고 합니다. 😀 SOLID 원칙 - Single Responsibility Principle : 단일 책임 원칙 한 클래스는 하나의 책임만 가져야 한다. - Open Closed Principle : 개방 폐쇄 원칙 소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다 - Listov Substitution Principle : 리스코프 치환 원칙 프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 ..

→2024.02.19

자유글

7가지 상위 1%의 프로그래머들의 습관

컴퓨터가 아닌 인간을 위한 코드 "어떤 바보라도 컴퓨터가 이해할 수 있는 코드를 작성할 수 있습니다. 좋은 프로그래머는 사람이 이해할 수 있는 코드를 작성합니다." - 마틴 파울러 코드는 컴퓨터만을 위한 것이 아닌 인간을 위한 것입니다. 코드는 코드를 읽고 관리하고 이를 기반으로 구축하는 팀의 엔지니어를 위한 것입니다. 코드는 휴대전화를 사용하는 어린이, API 요청을 하는 개발자, 나 자신 등 사용자를 위한 것입니다. 최고의 엔지니어들은 제품을 중시합니다. 인간의 문제 해결을 제일 먼저 생각합니다. 최고의 엔지니어들은 항상 그들의 코드의 가치를 사용자들을 위해 평가했습니다. 사용자들중 한 사람의 목표를 놓친 경우 그 코드는 프로덕션에 적용되지 않습니다. 코드 자체에서 벗어나기 놀라운 엔지니어들은 코드 ..

→2024.02.15

전체 글