takeU

부모에서 props로 컴포넌트를 내려주고, 자식 컴포넌트에서 해당 props를 받아 그려줄 때추가적인 property나 props를 할당해주고 싶은 경우에 cloneElement의 두번째 인자를 통해 속성을 내려주면 됨// 부모}/>// 자식import { cloneElement } from 'react';const Child = ({ componentProp }) => { return ( {cloneElement(componentProp, { value: 0 })} )}

netlify serveless(functions)를 사용할 때 키를 감추기 위해 프록시 사용CRA로 설계했다가 Vite로 마이그레이션하는 과정 중에 설정하는 법 정리Create React App (CRA)src 폴더 내 setupProxy.js 생성const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.use( "/.netlify/functions", createProxyMiddleware({ target: "http://localhost:9999", changeOrigin: true, }) );};Vitevite.config.js 파..

3. 리액트 훅 깊게 살펴보기 3.1. 리액트의 모든 훅 파헤치기 3.1.1. useState 함수형 컴포넌트 내부에서 상태를 정의하고, 관리할 수 있게 해주는 훅 const [state, setState] = useState(initialState) useState의 초깃값에 함수를 넣는 것 - 게으른 초기화 (lazy initialization) 게으른 초기화 함수는 state가 처음 만들어질 때만 실행 초깃값이 복잡하거나 무거운 연산을 포함할 때 사용 3.1.2. useEffect 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘 function Component() { useEffect(() => { // code }, [props, state]) 첫 번째 인수..

2. 리액트 핵심 요소 깊게 살펴보기 2.1. JSX란? XML과 유사한 내장형 구문 페이스북에서 개발 자바스크립트 표준의 일부는 아님 자바스크립트 엔진이나 브라우저에서 직접 실행되거나 표현되지 않음 트랜스파일러로 변환이 필요 2.1.1. JSX의 정의 JSXElement JSX를 구성하는 가장 기본 요소 HTML의 element와 비슷한 역할 HTML 태그와 구분짓기 위해 대문자로 시작 (표준은 아님) JSXAttributes JSXElement에 부여할 수 있는 속성 JSXSpreadAttributes - 전개 연산자와 동일 JSXAttribute - 속성 JSXAttributeKey JSXAttributeValue JSXElement - 다른 JSX 요소가 들어갈 수 있음 ( 잘 안쓰임 ) JSXF..

React Hook 정리 개발하면서 끊임없이 훅으로 코드를 짜면서도 잘 모르고 사용하는 부분이 많아 정리를 해볼 필요가 있다 생각이 들음. 꼭 필요한 내용들 위주로 작성하려 함. React Hook 이란? 우선 Hook이 도입되기 이전의 방식인 Class형 컴포넌트의 문제점은 다음과 같다 생명주기 메소드를 사용할 때, 해당 메소드에 설계 의도 이외의 코드가 들어가는 상황이 빈번해지고, 이는 버그를 유발하고 무결성을 해치게 됨. this 는 재사용성과 구성을 복잡하게 함. 이러한 문제를 안고 React 16.8 버전에 추가된 React Hook의 특징 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있다. 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. Hook을 도입했지만, Class를 ..

예시로 파일 업로드를 하는 인풋에 새로운 커스텀 버튼을 달아 작동하게 하고 싶은 상황 input에 useRef를 통해 래퍼런스를 추가해준 상태에서 커스텀 버튼의 클릭 이벤트로 클릭을 발생시키는 상황을 만들면 기존 react-hook-form의 register.ref 위에 덮어씌워져 훅폼의 데이터에 추가가 되지 않는 상황이 생김. 즉, 추가 커스텀 버튼을 누르면 input file 선택 버튼이 클릭 되어야하고 그와 동시에 input file에 추가된 파일데이터가 훅폼에 추가가 되어야하기때문에 인풋의 ref에 커스텀 버튼 클릭을 위한 ref와 훅폼의 ref가 동시에 걸려야 함. import React from 'react'; import { useForm } from 'react-hook-form'; exp..

tsx에서 emotion 문법인 css 속성에 대한 에러 // tsconfig.json { "compilerOptions": { "types": ["@emotion/core"] } } 위와 같이 추가해주면 됨 출처: https://github.com/emotion-js/emotion/issues/1249