Dev/React 5

모던 리액트 Deep Dive 3장

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]) 첫 번째 인수..

Dev/React 2023.12.28

모던 리액트 Deep Dive 2장

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

Dev/React 2023.12.12

React Hook 정리

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

Dev/React 2023.09.25

react-hook-form 커스텀 버튼 파일 업로드

예시로 파일 업로드를 하는 인풋에 새로운 커스텀 버튼을 달아 작동하게 하고 싶은 상황 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..

Dev/React 2023.09.22