[리액트를 다루는 기술] ~71p (2-4-6 리액트 & JSX) // 한달만에 독파하기

📚📚리다기 한달만에 독파하기 스타뜨!!!!! 

 

---

 

1. 리액트 시작

 

 - 리액트는 V(view)만 신경 쓰는 라이브러리

 - render() 함수는 뷰가 어떻게 생겼는지, 작동하는지에 대한 객체를 반환한다. 렌더링 작업이 끝나면 가지고 있는 정보로 HTML 마크업을 만들어서 DOM 요소에 주입한다. 

 - DOM은 Document Object Model의 약어이다. 객체로 문서 구조를 표현하는 방법으로 XML과 HTML로 작성한다. Tree 형태라 특정 노드를 찾고, 수정하고, 제거, 추가 할 수 있다. 

 - DOM 자체는 빠르지만 매 업데이트마다 돔에 접근하여 변화를 주면 성능이슈 발생. 리액트는 가상돔을 두고 변화된 것만 감지하여 실제 돔을 변경하여 성능을 개선했다. 즉 리액트는 페이스북이 리액트를 만든 이유인 "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기" 처럼 업데이트가 잦은 서비스에서 성능적으로 유리하다. 

 

2. JSX 

 

 - JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 

 - 번들러 도구를 사용하면 import(또는 require)로 모률을 불러왔을 때 불러 온 모율을 모두 합쳐서 하나의 파일을 생성

 - ReactDOM.render 란? 컴포넌트를 페이지에 렌더링하는 역할로 react-dom 모듈을 불러와 사용한다.

 - React.StrictMode 란? 리액트의 레거시 기능들을 사용하지 못하게 한다. (ref, componentWillMount 등) 나중에 완전히 사라지게 될 옛날 기능을 사용했을때 경고 출력

 - 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸주는 이유
     -> 가상 DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교 할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

 - return 에는 undefined를 렌더링 하지 않는다. return undefined이 될 수 있는 것 || undefined일때 나와야하는 것 (OR) 연산자로 undefined가 나올것이라고 예상되면 나올만한 값을 return 에 적어줘야 함

 - 인라인 스타일링에서는 카멜케이스로 css 속성 작성해야 함