반응형 리액트 (React)/Virtual Dom, Lifecycle3 리액트에서 돔요소를 가져오기 React.createRef() - 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야하나? - 리액트 요소에서 가져온다. class App extends React.Component { constructor(props) { super(props); // App 컴포넌트의 state를 정의해줍니다. this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; // ref는 이렇게 선언합니다! this.text = React.createRef(); } componentDidMount(){ // 콘솔에서 확인해보자! console.log(this.text); console.log(this.text.current); } // 랜더 함수 안에 리액트 엘리먼트를 넣어.. 2021. 9. 1. React - 라이프사이클 & 라이프사이클 함수 라이프사이클 - 컴포넌트의 라이프 사이클은 정말 중요한 개념이다. - 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 생성 → 수정(업데이트) → 제거 생성은 처음으로 컴포넌트를 불러오는 단계 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) 또는, 강제로 업데이트 했을 경우 (forceUpdate()를 통해 강제로 컴포넌트.. 2021. 9. 1. React - Virtual Dom & 라이프사이클 Dom - DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. - 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있다. - 이런 구조를 트리 구조라고 한다. -> DOM은 트리구조. - DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다. → 필요없는 연산이 너무 많이 일어난다. → 이를 보완하기 위한것이 가상돔이다. Virtual Dom - 가상돔은 메모리 상에서 돌아가는 가짜 DOM. - 가상돔의 동작 방식 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교 바뀐 부분만 변경 돔 업데이트 - 어떤 행동을 해야 DOM을 새로 그릴까? 처음 페이지 진입했을 때 데이터가 .. 2021. 9. 1. 이전 1 다음 반응형
