🙄 JSX에 대해 생각해보기
1. #root 를 미리 선언해놓는 이유는 무엇일까요?
import ReactDOM from 'react-dom';
ReactDOM.render(<div>메롱메롱</div>, document.getElementById('root');ReactDOM.render는 2번째 인자로 전달한 root 컨테이너의 컨텐츠를 제어할 수 있다. 즉, root 컨테이너의 자식 노드들을 제어할 수 있다는 의미가 된다.
제어한다는 의미?
React의 diffing 알고리즘을 root 컨테이너의 자식 컴포넌트들에게 적용한다는 의미
2. React 는 들어본 것 같은데 react-dom 은 무엇일까요?
import ReactDOM from 'react-dom';react-dom package는 앱의 최상위 레벨에서 사용할 수 잇는 DOM에 특화된 메서드와 필요한 경우 React 모델 외부로 나갈 수 있는 해결책을 제공합니다.
대다수의 컴포넌트는 이 모듈을 사용할 필요가 없다.
3. render 가 하는 일은 무엇일까요?
ReactDOM.render(element, container[, callback])React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환한다. (상태가 없는 컴포넌트는 null을 반환한다. → 참조 값을 변수에 담아 사용하는 것은 레거시)
React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경한다.
추가적인 콜백이 제공된다면 컴포넌트가 렌더링되거나 업데이트된 후 실행된다.
4. JSX와 표현식은 같을까요?
우선 표현식에 대해 알아보자.
표현식(식 - expression)이란? 값으로 평가될 수 없는 문을 의미한다.
즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다는 의미이다.
const score = 100;위 예제의 정수 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 그 자체로 표현식이다.
const score = 50 + 50;50 + 50은 리터럴과 연산자로 이뤄져 있다.
하지만 50 + 50도 평가되어 숫자 값 100을 생성하므로 표현식이다.
console.log(score); // -> 100변수 식별자를 참조하면 변수 값으로 평가된다.
식별자 참조는 값을 생성하지는 않았지만 값으로 평가되므로 표현식이다.
이처럼 표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.
즉, 값으로 평가될 수 있는 문은 모두 표현식이다.
표현식은 값으로 평가된다.
이때 표현식과 표현식이 평가된 값은 동등한 관계이다.
따라서 문법적으로 값이 위치할 수 있는 자리에 표현식도 위치할 수 있다.
표현식에 대해 알아보았으니, 이제 JSX 문법을 살펴보자.
const element = <h1>Hello world!</h1>;위 코드의 JSX는 표현식일까?!
그렇다. JSX도 컴파일이 끝나면, JSX 표현식이 정규 Javascript 함수 호출이 되고 Javscript 객체로 인식된다. 즉, JSX를 if문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로 부터 반환할 수 있기 때문에 JSX도 표현식이다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}5. JSX와 React.createElement()는 무슨 관계일까요?
JSX는 React.createElement()의 문법적 설탕이다.
JSX를 바벨로 돌리게 되면, React.createElement() 호출로 컴파일하기 때문이다.
// JSX 문법
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// Babel 컴파일 후
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);6. document.createElement()와 React.createElement()는 어떤점이 다를까요?
가장 큰 차이점은 document.createElement()는 DOM 요소를 반환하지만, React.createElement()는 DOM 객체를 반환한다는 점이다.
React.createElement()가 DOM 요소가 아닌 DOM 객체를 반환하는 이유는 React는 Virtual DOM을 사용하기 때문이다.
