2. 가상 DOM 이해하기
1) index.tsx 파일 살펴보기
- 4행에 App은 리액트 프레임워크에 컴포넌트 이다.
- 7행 ~ 14행은 리액트의 핵심기능을 보여줍니다.
- 11행은 코드가 잘못되었는지 판단 하여 오류메세지를 출력해주는곳(React.StrictMode)
- 마지막줄 reportWebVitals는 앱의 성능을 측정하는 기능
- 위에 기능들은 리액트 17버전 index.tsx랑 코드를 비교해서보면 코드가 바뀌어져있음 그이유는 서버쪽 렌더링 기능이 향상 된것과 관련이 있음
2) react 와 react-dom 패키지
- 리액트는 항상 react와 react-dom 패키지가 필요함
- react-dom/client, react-dom/server, react-native 은 렌더러(randerer) 라고 앱이 동작하는 환경에 특화된 패키지 입니다.
- CSR(client-side rendering) 은 react와 react-dom/client
- SSR(server-side rendering) 은 react와 react-dom/server
- 모바일앱은 react와 react-dom/client 라는 매커니즘이 잡혀있음
3) XML 마크업 언어
- 사람들이 쉽게 작성할 수 있고 컴퓨터도 그의미를 쉽게 파악할 수 있는 특수한 형식의 텍스트가 마크업 언어
- 예를들어 텍스트는 jack, 32 이렇게 쉼표로 구분을하면 '이름이 jack이고 나이가 32인가? ' 라고 추측을 할 수 있지만 컴퓨터는 구분하기가 어려움
<Person name="Jack" age="32" />
- 위에 처럼 두개의 단어의 의미가 분명하도록 바꾸면 컴퓨터 사람 둘다 의미를 알아볼 수 있게 되는데 위에 텍스트는 현재 많이 사용하고있는 마크업 XML문서 규약을 적용하여 작성한것
4) 문서객체모델(p56 ~ 64)
공부중에 이해가 잘안되어... 일단 뒤에부터 보고 다시 보기
5) JSX 구문 이해하기
- JSX 구문은 React.createElement 함수를 간결하게 하려고 만든것(밑에 말과 같음)
- 리액트는 React.createElement 호출의 복잡성을 해결하고자 자바스크립트 언어에 없는 JSX 기능을 언어 확장형태로 추가함
- JSX = JavaScript + XML 의 줄임말(React.createElement 호출코드를 간결하게 하려고 고안한것임)
- ex) <div></div> 형태가 기본형태이며 id, style과 같은 속성을 함께 기술할수있고 속성값은 '', "" 로 감싸야한다.
- HTML4는 조금 어긋나게 해도 되지만 HTML5 표준을 준수한다(태그를 안닫는 행위를 했을때 에러가남)
스스로 닫는 태그를 사용해서 XML 규약을 준수해야함
올바른 예
<input type="text" />
잘못된 예
<input type="text" >
- JSX에서 중괄호의 의미는 자바스크립트의 코드를 삽입 할 수 있는 기능이 있다.(return 키워드 없이 값만 반환해야함)
- 실행문(if, for, swich~case 등등)은 JSX코드 안에서 사용할 수 없음
- 변수나 배열을 담을 수가 있음
