React Compiler v 1.0 출시2025년 10월 7일 React 컴파일러 버전 1.0 이 출시 되었다. "이번 릴리스는 거의 10년에 걸친 거대하고 복잡한 엔지니어링 노력의 정점" 이라고 되어 있다.https://ko.react.dev/blog/2025/10/07/react-compiler-1 React Compiler v1.0 – ReactThe library for web and native user interfacesko.react.dev 리액트 컴파일러가 해결하려한 문제1. 부모 컴포넌트가 리렌더링이 되면 자식 컴포넌트가 무조건 같이 리렌더링이 된다.2. 1과 같은 문제는 useMemo, useCallback 을 통해 해결은 가능하다.3. 다만 이런 훅은 의존성 배열이 필요 해서 관리 ..

출처 : https://react.dev/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects Separating Events from Effects – ReactThe library for web and native user interfacesreact.dev declaring an Effect Event (효과 이벤트 선언) 참고 1. Effect의 목적과 의존성useEffect의 목적: useEffect는 컴포넌트 외부의 시스템(여기서는 채팅 서버 연결)과 동기화(synchronization)하는 데 사용됩니다. 즉, 의존성 배열([roomId])에 있는 값이 바뀔 때마다 동기화(연결/재연결)를 다시 실행..

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com 설치npm install react-hook-form register useForm 에서 반환하는 속성에 register 라는 속성이 있다. const { register } = useForm(); const { register } = useForm();return ( 제출 ); register 함수는 이 필드 이름 'image'를 바탕으로 다음 속성들을 ..

패키지 설치npm install react-hook-form @hookform/resolvers joi 입력시 실시간 유효성 검증 - 유효성 검증 내용은 signupFormSchema 파일에 따로 적용하여 resolver 로 useForm 과 연결 시킨다. - cotrol 을 useForm 에서 반환 받아서 Controller 에 연결 - Controller 내 render 로 input 을 넣어준다. (field에는 onChange, onBlur, value, ref, name이 모두 들어 있음.) - error={fieldState.error?.message} 를 통해 유효성 에러 메시지도 전달 가능 - 버튼 활성화 조건 (isValid 활용) useForm에 mode: 'onChange..

설치방법npm install joi 1. 유효성 검증 예시 (이메일 검증) 1) OK 일 경우 Value 값만 반환 const schema = Joi.string().email(); const result = schema.validate("test@example.com"); console.log(result); // { "value": "test@example.com" } 2) error일 경우 에러 속성을 포함 해서 반환 const schema = Joi.string().email(); const result = schema.validate("test@example"); console.log(result); 에러일 경우 아래와 같이 에러 속성을 포함해서 반환한다.{ "value": ..

useActionStateuseActionState 는 인자로 3개의 인자를 반환한다.const [state, formAction, isPending] = useActionState( handleSubmit, null ) 이 훅은 actionFunction이 실행된 결과 상태(state)를 추적하고,그 액션을 트리거할 수 있는 함수(formAction)를 리턴하며,현재 실행 중인 상태인지를 알려주는 isPending도 함께 제공한다. 1. state액션 실행 후의 결과 상태. 예를 들어, 서버에서 리턴된 메시지나 에러 등이 여기에 담긴다. 처음에는 null이다. 2. formActionhandlrSubmit 을 실제로 실행시킬 수 있는 함수. 처럼 사용한다.. 3. isPendingtrue일 경우, 현재..