one Book a Day

돔(Document Object Model) = 구조화된 텍스트 그러므로 HTML은 단순 텍스트일지라도 돔은 메모리에 값을 가지고 있는 표현식이다. ex)하나의 프로그램에 다수의 프로세스 -> 하나의 페이지에 여러개의 탭, 하나의 HTML안에 다수의DOM HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다.(DOM Tree의 노드) 돔은 getElementById 혹은 removeChild와 같은 메소드를 포함한다. 우리는 웹 페이지의 컨텐츠를 동적으로 수정하고 싶을 때 DOM을 수정한다. var item = document.getElementById("My") item.parentNode.removeChild(item); document는 root node의 추상화된 개념인 반면에 g..

React component의 render 함수 return값은 jsx 문법을 쓰게 되는데 여기서 컴포넌트들은 반드시 하나의 DOM 트리구조를 가져야한다. virtual DOM 에서 컴포넌트 변화를 감지 하기 위해서이고 이를위해 최상위 태그를 꼭 하나 써줘야 한다. 예전에는 태그 혹은 섹션태그(header,nav,footer 등)를 이용해서 감쌌었으나 react는 Fragment를 지원하는데 이는 의미없는 div의 남발을 막기위해서이다. (그치만 styling할때 다시 div태그로 바꾸는 일도 허다..) 혹은 로 사용하며 (이상하게 내 vs-code에서는 가 적용이 안됨..) 최종적으로 렌더링되어 웹 브라우저에 나타나는 코드에서는 보이지 않는다.

위 그림은 React 컴포넌트의 생성부터 삭제까지의 동작 과정이며 방법론이다. render()를 제외하고 크게 세가지로 나뉜다. 1.Mounting(생성) 2.Updating(수정) 3.Unmounting(죽음) Mounting는 DOM이 생성되고 웹에 component가 나타나는 로직인데 컴포넌트가 생성되면 constructor가 호출되어 클래스 기본값을 설정하고 -componentWillmount(): 컴포넌트 UI 렌더링 전 호출 -render(): 컴포넌트 UI 렌더링 -componentDidMount(): 컴포넌트가 브라우저 위에 나타난 후 호출 순서로 진행된다. Updating은 -props변경 -state변경 -부모 컴포넌트 리렌더링 -this.forceUpdate()실행 시 이루어지며(re..