React learning #1 기초

react : JS앱이 interactive하게 만들어주는 library

react-dom : library 또는 package, react element를 html body에 둘 수 있도록 해줌

 

리액트 JS의 핵심 포인트 REACT에서 생성도하고 사용자에게 보여질 내용도 컨트롤 할 수 있음 

JSX:자바스크립트를 확장한 문법

컴포넌트 : jsx를 반환하는 function

 

          const Container =()=> (
              <div>
                  <Title />
                  <Btn />
              </div>
          );

 

컴포넌트 안에 직접만든 컴포넌트를 넣을 땐 첫 문자는 대문자이여야한다.

<span>과 <Span>은 다름 

 

리액트 작성할때 컨포넌트는 함수나, 클래스로 만들어져서 이렇게불러와야하구요, 컴포넌트안에서 사용되는 변수나, 자바스크립트 문법은 중괄호를 써서 나타내야해요

 

state: 데이터가 저장되는 곳

 

reactjs는 vanila js와 다르게 오직 변경된 부분의 UI만 업데이트 시킨다!

 

변경된 부분만 업데이트된다는게 왜 좋은건가 했는데
리액트가 아닌 경우, 일반 자바스크립트를 쓴 브라우저는 노드정보가 바뀔때마다 노드트리를 처음부터 다시 생성한대요 5단계에 걸쳐서. 근데 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져준다고합니다! 이거 면접때 많이 물어보는거래요. 브라우저 작동원리와 연관있음. 니꼬쌤이 말하는 “렌더”가, 렌더트리를 말씀하시는 것 같은데 프엔은 이 렌더트리 단계를 얼마나 최적화하는가가 중요하다더라구요! 이상입니다 __