codinghatso

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React-Hook-Form 라이브러리를 사용하는 이유 직관적인 기능을 제공 패키지 크기가 작다 재렌더링 수를 최소화하고 유효성 검사 계산을 최소화 종속성이 없는 작은 라이브러리 직관적인 UI 코드의 양이 줄어든다. import React from "react"; import { useForm } from "react-hook-form"; const HeaderContent ..

발생한 문제 styled-components에서 styled component에 전달된 props 중에서 HTML 요소에 해당하지 않는 (props로 전달되지 않는 isDarkMode와 같은 속성이 감지됐다.)는 경고 메시지를 만나서 해결하려고 합니다. 즉, 해당 속성은 브라우저에 직접 적용되지 않는데도 전달되고 있다는 뜻입니다. Transient props styled-components에서 styled component에만 전달되고 HTML에는 전달되지 않는 props를 생성할 수 있습니다. 이를 위해서는 '$' 접두사를 사용하면 됩니다. 결론은 프롭이 스타일시트에만 필요하고 DOM으로 프롭을 전달할 필요가 없다면 '$'명시적으로 붙여서 사용할 필요가 있다는 것입니다. 해결한 코드 const Todo..

theme.js import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/...'); body{ font-family: 'Dongle', sans-serif; ... } `; export const theme = { colors: { ... }, spacing: { ... }, }; 코드의 구조를 살펴보시면 GlobalStyle과 theme를 export 해서 적용시키고자 하는 파일에서 import 해서 사용하면 됩니다. styled-components 라이브러리를 사용해서 적용시키고자 한다면, 위 코드처럼 ..

Theme 정의하는 방법 테마 객체를 만들어 일관성 있는 디자인 시스템을 구축하는 방법입니다. 유지보수가 용이하며, 생산력을 높여줄 수 있는 방법입니다. // theme.js export const theme = { colors: { primary: '#3498db', secondary: '#2ecc71', text: '#333', background: '#ecf0f1', }, spacing: { small: '8px', medium: '16px', large: '24px', }, }; // App.js import React from 'react'; import { ThemeProvider } from 'styled-components'; import { theme } from './theme'; im..

전체적인 틀 AttendanceBook.js import React, { useState, useReducer } from "react"; const reducer = (state, action) => { } const initialState = { } function AttendanceBook(){ const [name, setName] = useState(""); const [] = useReducer(reducer, ); return ( 추가 ) } export default AttendanceBook; 구현 import React, { useState, useReducer } from "react"; import Student from "../components/Student"; //reducer..

React 공식문서 링크 Hooks API Reference – React A JavaScript library for building user interfaces ko.legacy.reactjs.org useMemo는 메모리 최적화를 위한 Hook API입니다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a,b]); useMemo()에 콜백함수를 사용하며 retrun 값을 넘겨준다. return 값에는 객체도 넘겨줄 수 있다. useMemo()의 두 번째 인자로는 의존성 배열을 표기한다. (의존성 배열의 값이 바뀔 때만 콜백을 호출한다.) useMemo는 성능 최적화를 위해 사용할 수 있지만 의미상으로 보장이 있고 생각하지는 말..

React에서 제공해 주는 Context API에 대해서 정리해 봅시다. React가 props를 내려줘 상위 컴포넌트의 요소를 하위 컴포넌트에서 가져다가 사용하는 상황에서 너무 많은 컴포넌트를 통과하여 전달하는 것을 막고자 Context를 사용합니다 기존의 React의 props를 활용해 전역데이터를 사용했을 때 도중에 오류가 발생했다면 모든 컴포넌트에서 오류가 발생하는 현상이 나타날 것이며, 오류를 수정하는 것 또한 엄청난 작업이 될 것입니다. context를 사용하기 전에 고려할 것 context의 주된 용도는 다양한 레벨에 배치된 많은 컴포넌트에게 데이터를 전달하는 것입니다. context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 사용합시다. prop drilling을 피하기..

useRef 개념 설명 const ref = useRef(value); 함수형 컴포넌트에서 useRef를 부르면 ref object를 반환해줍니다. ref object 란? { current: value } 형식으로 저장이 됩니다. 수정이 가능하기 때문에 언제든 원하는 값으로 바꿔줄 수 있다. 렌더링이 계속되어도 언 마운트 되기 전까지 값을 유지할 수 있다. useRef의 용도 변수 함수형 컴포넌트가 렌더링 된다는 것은 컴포넌트 내부 변수들이 초기화된다는 말입니다. Ref의 값이 변화해도 렌더링이 되는 상황이 일어나지 않고, 렌더링이 일어나도 값이 초기화되지 않기 때문에 사용됩니다. 요소 접근 Ref를 사용하면 쉽게 input요소에 접근할 수 있게 됩니다. (마치 javascript의 Document.q..