반응형 개발/React52 React 튜토리얼에 있는 class형 컴포넌트.. 리액트 함수형만 하면서 자연스럽게 class에 대한 대부분의 정보를 잊게 되었다. class는 Object 찍어내는 용도 말고는 사용법을 잘 모름.. Class는 Object 찍어내는 기계(코딩애플) https://www.youtube.com/watch?v=dHrI-_xq1Vo&t=318s 코딩애플에 class 영상을 보았다. 설명을 엄청 잘해준다. 진작에 볼껄 그랬다. class는 object 찍어내는 기계! 코딩애플에서는 롤로 예를 들었다. 100개가 넘는 wnsdufdl.tistory.com 여튼 공식문서 튜토리얼을 보면 본능적?으로 무슨 뜻인지 알겠는데 한줄한줄 설명할 수 없어서 this, extends등의 용어를 알아보았다. (객체지향언어로서의 원론적인 의미까지 찾아보지는 않았음) extends.. 2022. 11. 1. state를 직접 변경하지 않고 useState로 변경해야 하는 이유 그냥 리액트는 변수가 state고 변경할땐 useState쓰는거야! 라고 생각해왔다가 오늘 한번 이유를 생각해보았다. state가 변경될때 업데이트되기 때문에?? 그럼 왜 직접변경은 안되고 꼭 useState로 변경시켜야할까?? 이유는 리액트가 객체의 메모리주소 를 비교하기 때문이다. 직접 변경하면 값만 변경되고 메모리주소는 변경되지 않으므로, state변화를 알아채지 못한다. => 리렌더링 x, 화면이 업데이트 되지 않음 const [name,setName] = useState(' '); 여기서 setName은 name을 변경하는 것이 아니라, 메모리 어딘가에 있는 값(메모리주소)을 변경하는 것이다. 그 후 name과 관련된 DOM이 리렌더링 된다. 참고1 참고2 2022. 10. 7. 제어컴포넌트 비제어컴포넌트 제어컴포넌트 : 어플리케이션이 사용자 입력을 제어한다. 실시간으로 값에 대한 피드백이 필요할 때 사용 항상 최신상태 유지, 사용자가 입력하는 모든데이터 동기화 제어컴포넌트는 사용자가 입력하는 모든 데이터가 동기화 되기 때문에 불필요한 리렌더링 혹은 api요청으로 인한 과부하가 걸릴 수 있다. 이런 경우 보통 debounce를 사용하고 있다. (대부분 debounce 혹은 throttle을 사용할 듯) 비제어컴포넌트 : 어플리케이션이 사용자 입력을 제어하지 않음 제출시에만 값이 필요할 때 사용 사용자의 입력값이 어플리케이션을 업데이트 시키지 않음. 사용자가 직접 트리거하기 전까지 리렌더링이나 업데이트가 되지 않음. ref를 이용하여 form내의 값을 관리하면 불필요한 리렌더링을 방지할 수 있는데, 이러한 .. 2022. 10. 3. useRef 로 관리하는 값이 바뀌었을 때 리렌더링 되지 않는 이유 리액트의 리렌더링 조건 먼저 리액트의 리렌더링 조건에 대해 살펴보면 리액트의 리렌더링 조건은 다음과 같다. ( 더 자세하게는 이 블로그) setState를 이용한 state변경 부모컴포넌트 리렌더링 props변화 이전 state와 현재 state, 혹은 이전 props와 현재 props를 얕은 비교(메모리 주소비교)하여 이전값 현재값 변화를 감지한다. useRef useRef는 보통 리액트에서 리렌더링과 값의 변화를 분리하고 싶을 때 사용한다. 나의 경험으로는 dom 직접 변화, 카카오맵 안깜빡 거리게 하기 정도가 있다. 그렇다면 왜 useRef로 관리하는 값은 리액트의 리렌더링 알고리즘에 감지되지 않을까?? useRef는 heap영역에 저장된다. heap영역에 있으면 어플리케이션 종료 or 가비지 컬렉.. 2022. 10. 3. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음 반응형
