공식문서/리액트3 리액트의 작동 원리 와 최적화 정리 최적화 실패시 시나리오 # 리액트 랜더링 작동원리? 리액트에서 스냅샷으로 가상돔 비교 => 다른게 있다면 랜더링 실제 돔은 리액트가 구성한 이전 상태와 차이점을 기반으로 변경이 필요할때만 업데이트 되기때문에 필요한 경우에만 변경이 된다. 이는 성능 측면에서 아주 중요한데, 이전과 현재 상태를 가상으로 비교한다는것은 메모리안에서만 발생하기때문에 간편하고 자원도 적게 든다. # 리액트 컴포넌트 작동원리 ? state 나 props 가 변경 될때마다 함수 전체가 재생성됨. 기본적으로 리액트 컴포넌트는 함수로 생성되는 형태이기때문에 마찬가지로 안에서 선언된 모든 함수와 자식 컴포넌트도 재평가 재실행된다. (물론 클래스도 되지만 이 글에선 함수형 을 전제로 함) # 리랜더링 !== 재평가 공부하다가 새롭게 알게 .. 2023. 7. 11. 어떻게 스테이트를 잘 구성하는가? :스테이트 구성에 대한 원칙 나는 그동안 스테이트 관리를 어떻게 해왔는가? 를 돌아보며 중급자용이라고 떡 박혀있는 공식문서의 리액트 스테이트 관리에 대한 글을 정리해보고자한다. 우리의 앱이 커질수록 의도적으로 컴포넌트 사이의 데이터흐름과 어떻게 state가 구성되는지 생각하는게 도움이된다. 불필요하고 중복되는 스테이트는 일반적인 버그 소스다. 그러면 어떻게 스테이트를 잘 구조화할수있을까? 그 전에 #상태를 잘 구조화하는것의 이점은 무엇일까? 상태를 잘 구조화 한다면 디버그와 수정이 쉬운 컴포넌트와 끊임없는 버그를 만드는 컴포넌트의 차이를 만든다. 스테이트에서 중요한 원칙은 불필요하고 중복되는 정보가 포함되면 안된다는 것 #스테이트 구성에 대한 원칙 여러가지 스테이트들이 있는 컴포넌트를 작성할때 우리는 기본적으로 1. 얼마나 많은 스.. 2023. 2. 23. 어떻게 리액트 에서 리랜더링 없이 정보를 기억 시키는가? (useRef) 컴포넌트에서 리액트의 시스템을 벗어나는 제어가 필요한 경우 가있다. 그때 돔을 조작하거나 정보를 기억시킬때 활용하는것이 useRef 다. 그동안 돔을 조작할때만 useRef를 써먹었는데 오늘의 글은 useState 대신에 useRef를 사용 하여 값을 저장하여 쓰는 법에 대한 글이다. 맨밑에도 적어놨지만 해당 글은 공식문서를 보면서 공부하며 작성한 글로 거의 공식문서 글과 거의 유사할 예정이다. 사실상 잡담빼면 걍 공식문서 번역글 #리액트에서 리랜더링이 일어나는 과정 이미 알고있다 시피 useState안에 저장된 값이 setFunction에 의해 변경되면 리랜더링이 일어난다. #ref의 개요 및 값 저장용도 로써의 기본적인사용 일단 useRef 의 ref는 레퍼런스의 ref다 즉 ref 는 참조를 말한다.. 2023. 2. 17. 이전 1 다음
