리액트에 대한 자세한 설명들은 다른 블로거 분들이 많이들 설명하셔서 저도 많이 봐왔는데 저는 제가 이해하기 위해 필기를 했던 느낌으로 풀어서 쓰려고합니다
리액트란?
컴포넌트들로 이루어진 UI를 구성하는 JavaScript 라이브러리로
state와props를 통해 컴포넌트를 조정하여Vitual DOM을 통해 사용자에게 보여줍니다.
자 여기서 Virtual DOM이란 가상의 DOM인데요.
먼저 DOM은 브라우저가 사용자의 화면에 html요소를 그려내기 위한 정보가 트리 형태로 저장된 데이터입니다.
실제 DOM에 html 요소의 추가나 변화를 주게 되면
1.html 구성요소를 나타내는 Dom Tree를 생성하고
2.css파일을 파싱하여 스타일 규칙을 만들어 웹브라우저의 구성요소를 나타내는Render Tree를 재생성 하고
3.각 요소간의 위치를 계산하는 Layout
4.색을 입히는 painting의 과정을 거치게 됩니다.
근데 이 html요소를 여러가지 만지게 되면 위의 여러 과정들을 되풀이하면서 엄청 무거운 연산을 반복하게 되는거에요
이 문제점을 보완하려 나온것이 Virtual DOM으로 만약 요소의 변화가 일어나면 그것을 가상의 DOM에 먼저 적용하고 모든 변화가 일어난 정보를 한번에 실제 DOM에 넘겨주어 단 한번의 연산을 진행하게됩니다.
컴포넌트(component):한가지의 기능을 수행하는 UI의 단위
우리가 리액트를 통해 개발하는 홈페이지의 이미지나 버튼등 모두 하나하나가 컴포넌트로 만드는 것이라고 생각하면 됩니다!! 이 컴포넌트는 하나의 기능의 틀로서 다양하게 재사용이 가능하기 때문에 필요한 기능들로 나누어 만들고 , 그것들을 어떻게 구성해야 하는지 고민하는게 중요합니다.
props:부모 컴포넌트에서 자식 컴포넌트에게 전해주는 데이터
부모 컴포넌트에서 설정한 attribute를 argument처럼 보내서 자식 컴포넌트가 이 값을 parameter처럼 받아서 컴포넌트를 구성하며 이 값을 직접적으로 수정할수는 없습니다.
state:컴포넌트 안에서 직접 선언하여 내부에서 값을 변경할 수 있는 데이터로 state의 값이 변하면 그 값을 사용하는 컴포넌트가 재 렌더링됩니다 자식 컴포넌트에 이 state값을 사용한다면 그 자식 컴포넌트도 재렌더링이 됩니다.
