hook React18을 사용해야 하는 좋은 이유: useSyncExternalStore 간단한 ToDo를 생각해 봅시다. 이것은 당신의 동료가 휴가를 가기 전에 💩 당신에게 선물로 남긴 것입니다: index.js에는 다른 함수를 호출하는 구성 요소 간에 전달되는 구성 요소 내 함수가 엉망입니다. 그리고 그것이 실제 프로젝트라면 훨씬 더 나쁠 것입니다. COMPONENT TREE가 더 깊기 때문에 COMPONENT의 중첩은 복잡성을 배가시킵니다! 스토어를 만들자 STORE에 넣기... hookjavascriptreactstore C# git 팁: git hook을 사용하여 코드 테스트 Visual Studio를 사용하여 C# 앱을 개발하지만 일반적으로 Visual Studio git 도구 대신 git cli를 사용하여 git 명령을 실행합니다. 이 작업을 수행하는 데 큰 문제는 없지만 때때로 문제가 발생합니다. 예를 들어: Visual Studio가 csproj 파일을 자동으로 저장하지 않고 이전에 저장하는 것을 잊었습니다git commit. 보통 dotnet build ... gitcsharphook React Global State - 조언을 구합니다 커뮤니티 안녕하세요! 마침내 Context API 및 기타 라이브러리를 사용하는 데 지쳐서 내 웹 앱의 전역 상태를 컨트롤러로 직접 해결하기로 결정했습니다. 여기 내가 지금 가지고 있고 잘 작동하는 것 같습니다. 이 구현을 사용하는 문제에 대한 피드백이나 제안을 얻을 수 있기를 바랍니다. 모두 감사합니다!... hookjavascripttypescriptreact 4주 - 입력 앱 처리 개발자님 안녕하세요! 다시 만나 반갑습니다. 이것은 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 반응에서 값이 변경될 때 입력 데이터를 처리하는 입력 처리 앱을 만들었습니다. HandleInput 구성 요소를 만들려면 우리는 다음을 수행해야 합니다. 입력 데이터는 일반적으로 구성... hookhandlinginputusestatereact 5주차 - 버튼 앱 비활성화 개발자님 안녕하세요! 다시 만나 반갑습니다. 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 비활성화 버튼 앱을 만들었습니다. 데이터가 변경되면 이를 처리하고 반응하는 버튼을 비활성화합니다. DisableButton 구성 요소를 만들려면 우리는 다음을 수행해야 합니다. 입력 데이터는... hookusestatereacthandlingbtn react hook-useState() 이해하기 React Hooks는 무엇이며 왜 필요한가요? 후크는 함수의 반응 상태를 "연결"하고 수정할 수 있는 함수입니다. 후크는 클래스 내에서 작동하지 않으며 클래스 없이 React를 사용할 수 있게 해줍니다. 변경 가능한 상태가 있는 웹 페이지를 대화식으로 만들 수 있는 방법으로 웹 사이트를 보다 대화식으로 만들 수 있습니다. useState() 이 부분에서는 useState() 후크를 다루었습... javascripthookusestatereact 7주 - Todo-앱 추가 개발자님 안녕하세요! 다시 만나 반갑습니다. 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 todo-add 앱을 만들었습니다. 사용자가 반응형 양식에 작업을 추가할 수 있는 앱입니다. Todo-Add 컴포넌트를 생성하려면 우리는 다음을 수행해야 합니다. 부모 TodoAddV1, I... hookusestatereactevents React Hook Form, Compound Components 및 Zod를 사용하여 구성 가능한 양식을 만드는 방법 이 기사에서는 고급 React 개념을 사용하여 재사용 가능한 구성 요소, 유효성 검사가 있는 양식을 만들고 구성 요소 간에 데이터를 공유하는 방법을 보여줍니다. 이렇게 하면 양식 작성을 허용하면서 소품 드릴링 및 컨텍스트 남용을 피할 수 있습니다. . 기본적으로 입력을 사용하기 전에 양식 구성 요소를 만들어야 한다는 것을 알고 있는 아래와 같은 구성 요소를 가질 수 있습니다. 독자는 이러한 ... hookzodreacttypescript useReducer를 사용한 코드 참조 양식 입력 코드는 App.js에서 실행됩니다. 앱 구성 요소를 단축하기 위해 감속기 기능을 다른 곳에 작성할 수 있습니다. 코드가 잘 실행됩니다. 나는 종종 참조용으로 작성된 작업 코드가 부족하여 만들고 있습니다. 여러 입력을 처리하기 위해 반응 함수 구성 요소에서 useReducer 후크를 사용할 것입니다. 또한 라디오 버튼의 초기 값을 처리하는 방법에 대한 라디오 버튼의 논리를 찾으십시오. 여기서 ... hookradiobuttonusereducerreact ⚛️ React Intersection Observer 👀 Hook 🪝. MDN에 따르면 Intersection Observer API는 비동기식으로 관찰할 수 있는 방법을 제공합니다. 대상 요소와 상위 요소 또는 최상위 문서의 교차점에서 변경됩니다. 복잡해 보이지만 React에서는 간단한 후크를 사용하여 교차를 달성할 수 있습니다. 명심해야 할 유일한 것은 '대상 요소'를 관찰자에게 전달해야 한다는 것입니다. useRef() 사용 후크는 매우 간단합니다 대상 요... observerintersectionhookreact useImperativeHandle: React 구성 요소를 만드는 새로운 관점 React는 선언적 프레임워크이며 훅의 이름에서 알 수 있듯이 부모 구성 요소가 자식 구성 요소 내에서 함수를 호출하도록 하여 React의 선언적 스타일에서 벗어나고 있습니다. 그러나 하위 구성 요소의 경우 그 안에 있는 기능에 액세스할 수 없으며 useRef 를 사용하여 변경하도록 호출할 수 없습니다. 몇 가지 코드를 살펴보겠습니다. 이것은 대화 구성 요소를 구현하는 선언적 방법입니다. 속... hookreact 라이브러리를 React 후크로 래핑 시리즈의 첫 번째 기사에서는 브라우저에서 스와이프 감지를 위한 바닐라 TS/JS 라이브러리를 구축했습니다. 널리 사용되는 모든 JS 프레임워크로 빌드된 애플리케이션에서 그대로 사용할 수 있지만, 우리는 조금 더 나아가 여러분이 선택한 프레임워크에서 사용될 때 우리 라이브러리를 일류 시민으로 만들고 싶습니다. 이 기사에서는 스 와이프 감지 라이브러리를 React 후크로 래핑합니다. 💡 이 기사... hooktypescriptreactjavascript 3주 - 앱 전환 개발자님 안녕하세요! 다시 만나 반갑습니다. 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 반응에서 버튼을 클릭할 때 콘텐츠를 표시하거나 숨기는 토글 앱을 만들었습니다. 토글 구성 요소를 만들려면 우리는 다음을 수행해야 합니다. 버튼 상태를 유지하는 상태를 만듭니다. 버튼 상태가 ... reacthookusestate Axios 인터셉터 후크 Typescript 재게시됨 안녕, 그 전에 다음과 같은 첫 번째 NPM 패키지를 게시했습니다. 문제 multipart/form-data 콘텐츠 유형을 호출할 방법이 없습니다. 새로운 기능 Application/json 및 multipart/form-data에 대한 별도의 후크. 구성에 유형을 사용할 수 있습니다. (APIConfig). Axios 인터셉터는 axios를 사용하여 각 호출 요청 및 응답 변환에 ... axiosreacthooktypescript 힘내 후크 101 이 튜토리얼에서는 git hooks가 무엇인지에 초점을 맞추지 않고 사용 방법에 대한 간단한 예를 보여드리겠습니다. 발신자 : 즉, 후크는 이벤트 발생 시 실행되는 프로그램입니다 모든 후크가 있는 디렉토리가 있습니다 모든 이벤트가 나열됩니다 . 이 튜토리얼에서는 Pre-Commit 이벤트에 집중하고 싶습니다. .git/hooks 폴더에서 모든 기본 후크 샘플을 찾을 수 있습니다. 이 101 ... hookpolicygitproductivity 자신의 사전 커밋 후크 만들기 이 튜토리얼에서 우리는 유일무이한 에 의해 만들어진 멋진 패키지 를 사용하여 아주 기본적인 git hook을 만들 것입니다 👏👏. 후크는 매우 기본적입니다. 단위 테스트가 없거나 실제 프로젝트에서 매우 기능적이지 않을 것입니다. 놀라운 것을 만드는 데 필요한 첫 번째 단계를 보여 주지만. I recommend you using a virtual environment to follow this... hooktutorialgitpython useEffect vs useLayoutEffect 오늘은 useEffect와 useLayoutEffect의 차이에 대해 공부해보려고 합니다. 일단 2가지 과정에 대해 알아야합니다. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 useEffect useEffect 는 컴포넌트들이 render 와 paint 된 후 실행됩니다. 비동기... ReacthookuseEffectuseLayoutEffectReact hook_LayoutEffets 란? 깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다. useLayoutEffect useEffect uselayoutEffect와 useEffect와 동일한 형태를 가진다. uselayoutEffect와 useEffect 차이점 useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 effect에 의존할 경우 약간 ... Reacthookfront endReact 지역 변수 vs 전역 변수 (feat. React Hook) 이 두 변수는 메모리에 존재하는 시간과 변수에 접근할 수 있는 범위의 차이가 존재한다. 지역 변수(local variable) : '블록' 내에서 선언된 변수 지역 변수는 변수가 선언된 블록{} 내에서만 유효하며, 블록이 종료되면 메모리에서 사라진다. 이러한 지역 변수는 메모리상의 스택(stack) 영역에 저장되며, 초기화하지 않으면 의미 없는 값(쓰레기값)으로 초기화된다. 예시로 함수의 매... Reacthook전역변수지역변수React [React] Hook과 클로저 React Hook에서는 useState라는 Hook을 통해 컴포넌트 내의 상태를 관리하는데, useState는 초기값(initialValue)를 받아서 [상태, 상태를 변경하는 함수] 형태의 배열을 반환한다. useState를 실행했을 때 받아오는 값은 react 모듈 내부로 거슬러 올라가 찾을 수 있다. resolveDispatcher 함수로 타고 들어가보면, 다시 ReactCurrent... ReacthookclosureReact react-hook-from (controlled component, uncontrolled component 리렌더링) react-hook-form 라이브러리를 접하게 되면서 장점 중 하나가 re-rendering이 적다는 것이었다. 이해하기 위해서는 controlled component, uncontrolled component 개념을 알게되었다. 보통 데이터를 입력받는 요소에 value와 onChange와 같은 변화를 감지하는 handler를 같이 넣어서 개발한다. 이때 사용된 input은 controll... ReacthookinputformReact Effect Hook (feat. lifecycle in React) 함수 컴포넌트의 useEffect Hook은 class 컴포넌트의 생명주기로 미루어 봤을 때, componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 봐도 좋다. 여기서 이 함수를 ‘effect’라고 부른다. useEffect를 컴포넌트 내부에 두는 이유는, effect를 통해 state 변수(또는 그 어떤 prop에도)에 ... focus생명주기lifecycleuseRefhookuseEffectfocus hook이란 근데 Hook이 뭔가요? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작... ReacthookuseStateReact surf react : hooks (useMemo, useCallback) - 3 useMemo와 useCallback 은 리액트의 렌더링 성능 최적화를 위한 hook 이기 때문에 필수적으로 사용할 필요는 없다. 이를 통해 렌더링 시의 고비용 계산을 방지하게 해줄 수 있다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다. 함수를 선언하는 것 자체는 사실 메모리도, CPU 도 ... React훅hook리액트React
React18을 사용해야 하는 좋은 이유: useSyncExternalStore 간단한 ToDo를 생각해 봅시다. 이것은 당신의 동료가 휴가를 가기 전에 💩 당신에게 선물로 남긴 것입니다: index.js에는 다른 함수를 호출하는 구성 요소 간에 전달되는 구성 요소 내 함수가 엉망입니다. 그리고 그것이 실제 프로젝트라면 훨씬 더 나쁠 것입니다. COMPONENT TREE가 더 깊기 때문에 COMPONENT의 중첩은 복잡성을 배가시킵니다! 스토어를 만들자 STORE에 넣기... hookjavascriptreactstore C# git 팁: git hook을 사용하여 코드 테스트 Visual Studio를 사용하여 C# 앱을 개발하지만 일반적으로 Visual Studio git 도구 대신 git cli를 사용하여 git 명령을 실행합니다. 이 작업을 수행하는 데 큰 문제는 없지만 때때로 문제가 발생합니다. 예를 들어: Visual Studio가 csproj 파일을 자동으로 저장하지 않고 이전에 저장하는 것을 잊었습니다git commit. 보통 dotnet build ... gitcsharphook React Global State - 조언을 구합니다 커뮤니티 안녕하세요! 마침내 Context API 및 기타 라이브러리를 사용하는 데 지쳐서 내 웹 앱의 전역 상태를 컨트롤러로 직접 해결하기로 결정했습니다. 여기 내가 지금 가지고 있고 잘 작동하는 것 같습니다. 이 구현을 사용하는 문제에 대한 피드백이나 제안을 얻을 수 있기를 바랍니다. 모두 감사합니다!... hookjavascripttypescriptreact 4주 - 입력 앱 처리 개발자님 안녕하세요! 다시 만나 반갑습니다. 이것은 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 반응에서 값이 변경될 때 입력 데이터를 처리하는 입력 처리 앱을 만들었습니다. HandleInput 구성 요소를 만들려면 우리는 다음을 수행해야 합니다. 입력 데이터는 일반적으로 구성... hookhandlinginputusestatereact 5주차 - 버튼 앱 비활성화 개발자님 안녕하세요! 다시 만나 반갑습니다. 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 비활성화 버튼 앱을 만들었습니다. 데이터가 변경되면 이를 처리하고 반응하는 버튼을 비활성화합니다. DisableButton 구성 요소를 만들려면 우리는 다음을 수행해야 합니다. 입력 데이터는... hookusestatereacthandlingbtn react hook-useState() 이해하기 React Hooks는 무엇이며 왜 필요한가요? 후크는 함수의 반응 상태를 "연결"하고 수정할 수 있는 함수입니다. 후크는 클래스 내에서 작동하지 않으며 클래스 없이 React를 사용할 수 있게 해줍니다. 변경 가능한 상태가 있는 웹 페이지를 대화식으로 만들 수 있는 방법으로 웹 사이트를 보다 대화식으로 만들 수 있습니다. useState() 이 부분에서는 useState() 후크를 다루었습... javascripthookusestatereact 7주 - Todo-앱 추가 개발자님 안녕하세요! 다시 만나 반갑습니다. 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 todo-add 앱을 만들었습니다. 사용자가 반응형 양식에 작업을 추가할 수 있는 앱입니다. Todo-Add 컴포넌트를 생성하려면 우리는 다음을 수행해야 합니다. 부모 TodoAddV1, I... hookusestatereactevents React Hook Form, Compound Components 및 Zod를 사용하여 구성 가능한 양식을 만드는 방법 이 기사에서는 고급 React 개념을 사용하여 재사용 가능한 구성 요소, 유효성 검사가 있는 양식을 만들고 구성 요소 간에 데이터를 공유하는 방법을 보여줍니다. 이렇게 하면 양식 작성을 허용하면서 소품 드릴링 및 컨텍스트 남용을 피할 수 있습니다. . 기본적으로 입력을 사용하기 전에 양식 구성 요소를 만들어야 한다는 것을 알고 있는 아래와 같은 구성 요소를 가질 수 있습니다. 독자는 이러한 ... hookzodreacttypescript useReducer를 사용한 코드 참조 양식 입력 코드는 App.js에서 실행됩니다. 앱 구성 요소를 단축하기 위해 감속기 기능을 다른 곳에 작성할 수 있습니다. 코드가 잘 실행됩니다. 나는 종종 참조용으로 작성된 작업 코드가 부족하여 만들고 있습니다. 여러 입력을 처리하기 위해 반응 함수 구성 요소에서 useReducer 후크를 사용할 것입니다. 또한 라디오 버튼의 초기 값을 처리하는 방법에 대한 라디오 버튼의 논리를 찾으십시오. 여기서 ... hookradiobuttonusereducerreact ⚛️ React Intersection Observer 👀 Hook 🪝. MDN에 따르면 Intersection Observer API는 비동기식으로 관찰할 수 있는 방법을 제공합니다. 대상 요소와 상위 요소 또는 최상위 문서의 교차점에서 변경됩니다. 복잡해 보이지만 React에서는 간단한 후크를 사용하여 교차를 달성할 수 있습니다. 명심해야 할 유일한 것은 '대상 요소'를 관찰자에게 전달해야 한다는 것입니다. useRef() 사용 후크는 매우 간단합니다 대상 요... observerintersectionhookreact useImperativeHandle: React 구성 요소를 만드는 새로운 관점 React는 선언적 프레임워크이며 훅의 이름에서 알 수 있듯이 부모 구성 요소가 자식 구성 요소 내에서 함수를 호출하도록 하여 React의 선언적 스타일에서 벗어나고 있습니다. 그러나 하위 구성 요소의 경우 그 안에 있는 기능에 액세스할 수 없으며 useRef 를 사용하여 변경하도록 호출할 수 없습니다. 몇 가지 코드를 살펴보겠습니다. 이것은 대화 구성 요소를 구현하는 선언적 방법입니다. 속... hookreact 라이브러리를 React 후크로 래핑 시리즈의 첫 번째 기사에서는 브라우저에서 스와이프 감지를 위한 바닐라 TS/JS 라이브러리를 구축했습니다. 널리 사용되는 모든 JS 프레임워크로 빌드된 애플리케이션에서 그대로 사용할 수 있지만, 우리는 조금 더 나아가 여러분이 선택한 프레임워크에서 사용될 때 우리 라이브러리를 일류 시민으로 만들고 싶습니다. 이 기사에서는 스 와이프 감지 라이브러리를 React 후크로 래핑합니다. 💡 이 기사... hooktypescriptreactjavascript 3주 - 앱 전환 개발자님 안녕하세요! 다시 만나 반갑습니다. 대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다. 이번 주에 우리는 반응에서 버튼을 클릭할 때 콘텐츠를 표시하거나 숨기는 토글 앱을 만들었습니다. 토글 구성 요소를 만들려면 우리는 다음을 수행해야 합니다. 버튼 상태를 유지하는 상태를 만듭니다. 버튼 상태가 ... reacthookusestate Axios 인터셉터 후크 Typescript 재게시됨 안녕, 그 전에 다음과 같은 첫 번째 NPM 패키지를 게시했습니다. 문제 multipart/form-data 콘텐츠 유형을 호출할 방법이 없습니다. 새로운 기능 Application/json 및 multipart/form-data에 대한 별도의 후크. 구성에 유형을 사용할 수 있습니다. (APIConfig). Axios 인터셉터는 axios를 사용하여 각 호출 요청 및 응답 변환에 ... axiosreacthooktypescript 힘내 후크 101 이 튜토리얼에서는 git hooks가 무엇인지에 초점을 맞추지 않고 사용 방법에 대한 간단한 예를 보여드리겠습니다. 발신자 : 즉, 후크는 이벤트 발생 시 실행되는 프로그램입니다 모든 후크가 있는 디렉토리가 있습니다 모든 이벤트가 나열됩니다 . 이 튜토리얼에서는 Pre-Commit 이벤트에 집중하고 싶습니다. .git/hooks 폴더에서 모든 기본 후크 샘플을 찾을 수 있습니다. 이 101 ... hookpolicygitproductivity 자신의 사전 커밋 후크 만들기 이 튜토리얼에서 우리는 유일무이한 에 의해 만들어진 멋진 패키지 를 사용하여 아주 기본적인 git hook을 만들 것입니다 👏👏. 후크는 매우 기본적입니다. 단위 테스트가 없거나 실제 프로젝트에서 매우 기능적이지 않을 것입니다. 놀라운 것을 만드는 데 필요한 첫 번째 단계를 보여 주지만. I recommend you using a virtual environment to follow this... hooktutorialgitpython useEffect vs useLayoutEffect 오늘은 useEffect와 useLayoutEffect의 차이에 대해 공부해보려고 합니다. 일단 2가지 과정에 대해 알아야합니다. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 useEffect useEffect 는 컴포넌트들이 render 와 paint 된 후 실행됩니다. 비동기... ReacthookuseEffectuseLayoutEffectReact hook_LayoutEffets 란? 깃허브에 저장 된 hook-flow라는 프로젝트를 저장해 보았다. useLayoutEffect useEffect uselayoutEffect와 useEffect와 동일한 형태를 가진다. uselayoutEffect와 useEffect 차이점 useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페이트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 effect에 의존할 경우 약간 ... Reacthookfront endReact 지역 변수 vs 전역 변수 (feat. React Hook) 이 두 변수는 메모리에 존재하는 시간과 변수에 접근할 수 있는 범위의 차이가 존재한다. 지역 변수(local variable) : '블록' 내에서 선언된 변수 지역 변수는 변수가 선언된 블록{} 내에서만 유효하며, 블록이 종료되면 메모리에서 사라진다. 이러한 지역 변수는 메모리상의 스택(stack) 영역에 저장되며, 초기화하지 않으면 의미 없는 값(쓰레기값)으로 초기화된다. 예시로 함수의 매... Reacthook전역변수지역변수React [React] Hook과 클로저 React Hook에서는 useState라는 Hook을 통해 컴포넌트 내의 상태를 관리하는데, useState는 초기값(initialValue)를 받아서 [상태, 상태를 변경하는 함수] 형태의 배열을 반환한다. useState를 실행했을 때 받아오는 값은 react 모듈 내부로 거슬러 올라가 찾을 수 있다. resolveDispatcher 함수로 타고 들어가보면, 다시 ReactCurrent... ReacthookclosureReact react-hook-from (controlled component, uncontrolled component 리렌더링) react-hook-form 라이브러리를 접하게 되면서 장점 중 하나가 re-rendering이 적다는 것이었다. 이해하기 위해서는 controlled component, uncontrolled component 개념을 알게되었다. 보통 데이터를 입력받는 요소에 value와 onChange와 같은 변화를 감지하는 handler를 같이 넣어서 개발한다. 이때 사용된 input은 controll... ReacthookinputformReact Effect Hook (feat. lifecycle in React) 함수 컴포넌트의 useEffect Hook은 class 컴포넌트의 생명주기로 미루어 봤을 때, componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 봐도 좋다. 여기서 이 함수를 ‘effect’라고 부른다. useEffect를 컴포넌트 내부에 두는 이유는, effect를 통해 state 변수(또는 그 어떤 prop에도)에 ... focus생명주기lifecycleuseRefhookuseEffectfocus hook이란 근데 Hook이 뭔가요? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작... ReacthookuseStateReact surf react : hooks (useMemo, useCallback) - 3 useMemo와 useCallback 은 리액트의 렌더링 성능 최적화를 위한 hook 이기 때문에 필수적으로 사용할 필요는 없다. 이를 통해 렌더링 시의 고비용 계산을 방지하게 해줄 수 있다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다. 함수를 선언하는 것 자체는 사실 메모리도, CPU 도 ... React훅hook리액트React