모르는 개념을 알게되어서 적게되는 글이며, 항상 react에서 겪는 오류들이 줄어들었으면 하는 바람에 쓰는 글이다. 개념 1) 제어 컴포넌트 HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 2) 비제어 컴포넌트 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 ..
ref
728x90
반응형
우연히 글을 보다가 정리해두면 좋겠다 싶어서 정리하게 되었다. 정리하게 된 계기 React18 + StrictMode에서는 개발모드에서 data fetching이 최소 두 번이상 일어날 수 있다. 이러한 글을 계속 보았지만 왜 그런지 모르고 그냥 그런가보다하고 넘어갔다. 우리가 react를 이용하여 웹 사이트를 구현하고자 할 때 app.js는 기본적으로 생성된다. ReactDOM.render( , document.getElementById('root') ); 위와 같이 app.js가 생겼는데, 이를 아래와 같이 바꾸면 두번이나 재랜더링이 되지 않는다. ReactDOM.render( , document.getElementById('root') ); 개념 공식문서에 따르면 strictmode는 StrictM..
개념 useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다. → 개인적인 견해로 여러 글을 보았는데 위의 문장이 제일 useRef()를 잘 설명해주는 것 같다. 사용 useRef함수는 current속성을 가지고 있는 객체를 반환한다. 인자로 넘어온 초기값을 current속성에 할당한다. 이 current속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않는다. 위에서 정의한 것처럼 리랜더링되지 않기 때문이다. React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않는다. import React, { useState, useRef } from "react"; function ManualCounter() { const [c..
728x90
반응형