Yepchani's place

들어가며 react는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반으로 동작하는데요. 이러한 컴포넌트들은 각자의 라이프 사이클(생명 주기)을 가지고 있습니다. 이번 시간에는 react의 라이프 사이클에 대해 알아보겠습니다. 라이프 사이클이란? 라이프 사이클은 컴포넌트가 생성되어 화면에 나타나는 순간부터, 변화가 일어나고, 마침내 화면에서 사라지는 순간까지의 전 과정을 말합니다. 사람의 생애처럼, 컴포넌트도 태어나고, 성장하며 변화하고, 마침내는 사라집니다. 이러한 과정 중에서 각 단계별로 특정한 작업을 수행할 수 있도록 도와주는 것이 라이프 사이클 메서드입니다. react 컴포넌트의 라이프 사이클은 크게 세 가지 단계로 나눌 수 있는데요. 마운트(Mounting), 업..

들어가며 웹/앱 관련 분야에 계시다면 react에 대해서 많이들 들어보셨을 텐데요. react는 'UI를 위한 자바스크립트 라이브러리'입니다. SPA(Single Page Application)를 구축하는 데 사용이 됩니다. 이번 시간에는 react에 대해서 알아보려고 합니다. 주요 개념부터 알아보자 react를 이해하기 위해서 아래 개념들을 알아둘 필요가 있습니다. 컴포넌트(Component) react의 핵심은 바로 '컴포넌트'라는 개념입니다. 컴포넌트는 UI에서 독립적이고, 재사용 가능한 부분을 나타냅니다. 각 컴포넌트는 자신의 상태와 로직을 관리합니다. 컴포넌트가 클래스로 구성되면 클래스 컴포넌트, 함수로 구성되면 함수 컴포넌트라고 부릅니다. 상태(State)와 속성(Props) state는 컴포..

들어가며 이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다. 폼을 구현하기 위해 react hook form을 사용했는데요. input에는 onBlur, onChange, onClick, onKeyDown 이벤트를 사용했습니다. 다음과 같은 형태였죠. ; 문제 문제는 폼 제출이 안 된다는 겁니다. 응?? 이벤트에 무슨 문제가 있나 싶어 하나씩 지워보며 확인한 결과 onChange를 지웠더니 정상 작동이 되는 걸 확인했습니다. 이상한 점은 onChange 이벤트 핸들러 내부 로직을 지우고 등록만 해도 문제가 발생했다는 거죠. 솔루션 이곳저곳 찾아보니 다음과 같은 내용을 발견할 수 있었습니다. react hook form Ver 7.16부터는 onBlur와 onChange 핸들러를 r..