10월 15일 TIL - JSX, Rendering Element

PWA 책이랑 AWS책이 왔는데... 생각보다 React doc을 자세히 안 봐서 모르는 내용들이 있구나 생각이 들었다. 당분간은 React ㄱㄱ해~

 

개발

JSX

프로퍼티 규칙

JSX는 HTML보다는 JavaScript에 가깝다. 그래서 React DOM은 camelCase로 프로퍼티 네이밍 규칙을 사용한다.

 

Injection Attacks을 막는다.

유저 인풋을 JSX에서 사용하는 것은 안전하다.

기본적으로 React DOM은 JSX안에 있는 값들은 렌더링 전에 이스케이프화 한다.(원래 문장: By default, React DOM escapes any values embedded in JSX before rendering them.)(아마도 이스케이프문자화 한다는 말 같다.) 때문에 인젝션 공격을 막을 수 있다.

+ 인젝션 공격: 유저가 특정 입력 창에다가 쿼리문을 입력해서 데이터를 빼오는 그런 해킹 기법.

 

JSX는 Object를 나타낸다.

바벨은 JSX를 React.createElement() 호출로 컴파일한다. React.createElement()는 버그 코드를 막기 위해서 몇가지 체크를 해주지만, 근본적으로는 object를 만들어주는 것입니다. 이 object를 'React elements'라고 합니다. React는 이 object를 읽어서 DOM이 최신 상태로 유지하도록 하는데 사용합니다.

왼쪽부터 (1)JSX, (2)바벨이 컴파일 시 사용하는 React.createElement() 함수, (3)그리고 만들어진 react element

+ 바벨: 작성한 JavaScript 코드를, JavaScript 엔진이 실행할 수 있는 코드 버전으로 변환시켜주는 JavaScript 컴파일러

---

Rendering Elements

element는 가장 작은 리액트 앱의 구성요소이다.

브라우저 DOM element와 다르게 React element는 생성이 쉽다. 

React DOM은 React elements을 match하기 위해서 DOM 업데이트를 관리합니다.

+ onstelement와 component는 다른 것이라고 함. element는 component에 의해 만들어진 것임

 

DOM에서 element Rendering

코드를 위와같이 하면 element를 가져와서 DOM에 렌더링한다고 함.

 

렌더링 된 Element 업데이트

React element는 불변성을 가진다. 일단 생성하면 element의 자식이나, 속성을 변경할 수 없다. (아직 state를 사용 안 하는 상태, 예제로는 setInterval 함수로 일정 시간마다 ReactDom.render() 함수를 실행하는 방식으로 보여주고 있음)

 

React는 필요 시에만 업데이트를 한다.

React DOM은 element와 element의 자식을 이전의 것과 비교한다. 그리고 오직 DOM의 업데이트가 필요한 부분만 갱신한다.

 

---

영어

be going to + 동사 원형

동사원형 할 것이다. 라고 해석하면 된다고 한다.

The plane is going to land 30 minutes early라는 문장이 있었는데... 위의 사항을 고려하지 않으면 '비행기는 30분 일찍 land에 가고있는 중이다.' ㅋㅋㅋㅋㅋㅋㅋㅋㅋ... 라고 해석이 됐었다... 외우자 외워...

 

will be +ing

'~하고 있을 것이다'라는 의미 외에도 추측의 의미로 '~할 것이다.'라고 해석이 가능하다고 함.