풀소유

리액트는 컴포넌트를 생성하고 렌더링 하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명 주기라고 표현한다. 클래스 컴포넌트 예제import {Component} from "react";import {Title} from "../components";export default class ClassLifecycle extends Component { state = { today: new Date(), intervalId: null as unknown as NodeJS.Timer // null 값을 unknown 타입으로 변환한 값을 다시 NodeJS.Timer 타입으로 변환한다. // 최종적으로 intervalId 변수는 null로 초기화..

대부분의 언어에서는 원시 타입(숫자, 불리언 등)과 읽기 전용 문자열은 값을 새로운 메모리 공간에 복사하여 독립적인 변수를 생성하는 깊은 복사를 수행한다. 반면에 객체와 배열 같은 참조 타입은 주소(참조)를 복사하여 같은 객체나 배열을 공유하게 되는 얕은 복사를 기본적으로 수행한다. 타입스크립트에서는 읽기 전용 문자열도 컴파일 타임에서 크기를 알 수 있어 깊은 복사가 발생할 수 있다. 이 복사 방식은 변수와 객체의 독립성을 유지하고 메모리 관리를 보장하기 위한 중요한 개념이다. 리액트 훅에서 깊은 복사 여부가 중요한 이유는 대다수 훅 함수에 필요한 의존성 목록 때문이다. const onChangeName = useCallback((e: ChangeEvent)=>{ const newForm = for..

서버에서 HTML을 생성해 웹 브라우저 쪽에 전송하는 전통 방식의 웹 개발에서는 사용자에게 데이터를 받을 때 요소를 사용한다. 이때 폼 요소는 method 속성에 HTTP 메서드를 설정하고, action 속성에는 폼 데이터를 전송한 뒤 전환할 화면의 URL을 설정하는 방식으로 사용한다. 만일 method 설정값이 POST 라면 폼 데이터를 암호화하는 다음 3가지 방식 중 하나를 encType 속성에 설정한다.application/x-www-form-urlencoded(기본값)multipart/form-datatext/plan하지만 리액트와 같은 SPA 방식은 백엔드가 API 방식으로 동작하므로 굳이 폼 요소와 속성등을 설정할 필요가 없다. 다만 관습적으로 사용자 입력을 받는 부분을 요소로 구현한다.버튼 ..

HTML 요소는 웹 페이지의 구조를 정의하는 데 사용되며, 각 요소는 다양한 속성(attributes)을 가질 수 있다.예를 들어 input 요소는 type, value, onChange 등의 속성을 가질 수 있다.React에서는 이러한 HTML 요소들을 컴포넌트로 사용한다. TypeScript와 함께 사용할 때, HTML 요소의 속성을 타입으로 정의하여 컴포넌트의 Props를 관리할 수 있도록 DetailedHTMLProps와 HTMLAttributes를 제공한다. HTMLAttributes모든 일반적인 HTML 속성들을 포함하는 타입이다. 이 타입은 특정 HTML 요소가 가질 수 있는 모든 속성들을 정의한다.예를 들어, div 요소의 속성을 정의하려면 HTMLAttributes 타입을 사용할 수 있다..

PropsWithChildrenPropsWithChildren은 타입스크립트로 작성된 React 컴포넌트에서 자식 요소를 포함하는 props를 정의하는 데 사용되는 타입이다.이를 사용하면 컴포넌트의 타입 안전성을 높이고, 코드 가독성을 향상시키며, 더 유연한 컴포넌트를 만들 수 있다.리액트 17 버전까지는 children 속성을 FC 타입에 포함했지만 18 버전부터는 FC 타입에서 children 속성을 제거했다. 그리고 PropsWithChildren이라는 제네릭 타입을 새롭게 제공하여 children?: ReactNode 부분을 PropsWithChildren 타입으로 대체했다.  왜 PropsWithChildren을 사용할까?React 컴포넌트는 일반적으로 props를 통해 데이터를 전달받는다. 하..

경고isOpen이라는 값을 styled-component에 보내주는데 아래와 같은 경고 문구가 로그에 찍혔다.Warning: React does not recognize the isOpen prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isopen instead. If you accidentally passed it from a parent component, remove it from the DOM element. 발생 이유DOM 요소에 대한 사용자 정의 속성이 React에 의해 대문자로 시작할 수 없기 때문이다. 여기서 isOpen 값은 ..

리액트 16.8부터 훅(Hooks)이 도입되어 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 되었다.화면을 그릴 때마다 호출되는 훅의 숫자와 순서를 동일하게 하기 위하여 루프, 조건 분기, 콜백 함수 안에서는 훅을 호출할 수 없다. 이런 위치에서 훅을 호출하는 코드를 작성하면, 빌드 에러 또는 실행 시 에러가 발생한다. 따라서, 훅은 컴포넌트의 최상위 레벨에서만 호출되어야 한다. 또한, 리액트 훅은 반드시 함수 컴포넌트에서만 사용해야 한다.용도용도훅컴포넌트 데이터 관리useMemouseCallbackuseStateuseReducer컴포넌트 생명 주기 대응useEffectuseLayoutEffect컴포넌트 메서드 호출useRefuseImperativeHandle컴포넌트 간의 정보 공유useCo..