react9 React Virtual DOM React의 최적화 기법 중 하나인 virtual DOM에 대해 알아보겠습니다. 혹시 DOM에 대해 아직 정확히 모르시다면 다음 포스팅을 보고 오시면 내용 이해에 도움이 됩니다. DOM 은 무엇인가? DOM은 Document Object Model(문서 객체 모델)이다. HTML이나 XML로 이루어진 문서를 프로그래밍적으로 js 코드 상에서 수정 가능하도록 interface를 제공한다. 즉, 각 element에 대한 method를 제공하여 수.. amkorousagi-money.tistory.com Virtual DOM이란? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입.. 2021. 3. 28. React와 React Hooks의 상태와 생명주기 React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. -react 한국 공식 홈페이지 중 자습서- 이런 component들이 코드의 재사용성을 높여준다 그리고, 이런 component들은 자신만의 state를 가지고, 이 state에 따라 다르게 rendering 될 수 있다. 상태(State) State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다 props는 component 랜더링 시 전달하는 전달 인자이고, state는 component 자신이 가지고 있는 비공개된 정보이다. state를 통해 함수는 캡슐.. 2021. 3. 23. 리액트 컴포넌트 안 바뀜(react component not change) 결론부터 말하겠다. 새로운 key를 줘라. 예제 코드와 결과 구글 map api를 사용하는 간단한 예제이다. return props를 바꾸어 전달해도, SimpleMap 컴포넌트가 update 되지 않을 것이다. 그럼 이제 key값을 주자. 단, key는 props에 따라 변화하는 값이어야 한다. 여기서는 간단하게 위도(lat) 정보를 key값으로 주자. return 이런 현상이 일어나는 이유 react는 항상 최적화를 위해 "필요한" 부분만 업데이트한다. 그렇지 않은 부분은 기존의 그대로 둔다. 그럼 이 "필요한" 부분을 누가 판단하는가? 컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니.. 2021. 3. 4. 이전 1 2 다음
