[코드잇 스프린트] 0417 데일리 퀴즈

 

1. 'setState'는 비동기처럼 동작하지만 비동기 함수는 아니다 (O, X)

답: O

 

 

2. 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.

엘리먼트는 자바스크립트 객체고, 리액트로 화면을 그려내는 데에 가장 기본적인 요소이다. 엘리먼트는 한 번 생성되면 다시는 변형되지 않는다.

 

반면 컴포넌트는 엘리먼트를 반환하는 함수 혹은 클래스를 의미한다.
재사용성을 강조하여, 엘리먼트를 좀 더 자유롭게 다룰 수 있으며, 컴포넌트의 이름을 사용하여 하나의 태그처럼 사용할 수 있다.

 

 

3. 함수형 컴포넌트의 장점은 무엇인가요?

• 클래스형 컴포넌트보다 선언이 간편다.
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
• 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다.
• 이전에는 라이프사이클 API를 사용하지 못한다는 단점이 있었는데, 이제는 16.8부터 지원하는 Hook을 통해 이한 단점이 사라졌다.

 

 

4. JSX는 무엇인가요? 

JSX는 JavaScript XML(eXtensible Markup Language)의 약어로, HTML 요소에 유효한 자바스크립트 객체를 내장할 수 있는 자바스크립트 확장이다. 

 

리액트에선 보통 HTML과 자바스크립트를 별도로 작성하기 보다는, JSX를 이용하여 HTML과 자바스크립트를 모두 포함하고 있는 '컴포넌트'를 생성한다.

 

JSX는 HTML보다는 자바스크립트에 가깝다고 한다. 

 

 

4-1. import React from ‘react’ 는 왜 사용하나요?

브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해 주어야 한다.

 

리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기 위해서 import React from ‘react’를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다.

 

1. Hello world! (JSX)

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return <h1>Hello World!</h1>
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

 

2. Hello world! (JSX -> JS)

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return React.createElemet("h1",null,"Hello World");
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

 

JSX에서 작성한 <h1>Hello, World!</h1>가 React.createElemet("h1",null,"Hello World")로 변환된 것을 볼 수 있다. 이처럼 JSX는 React라는 객체의 메소드를 이용하여 구성요소들을 생성하기 때문에 문서의 위에 import React from ‘react’를 작성해 해당 JSX가 객체React를 받아오고 추후 Babel이라는 웹팩을 통해 React를 유효한 JavaScript로 변환할 수 있도록 해준다.

 

기쁜 소식은 2020년 10월 20일에 릴리즈된 React v17를 보면, React 내부적으로 JSX transformer가 JSX를 React 요소로 변환하는 작업을 거치기 때문에 모든 컴포넌트에 import React from ‘react’를 작성하지 않아도 된다.

 

1. Hello world! (JSX)

function App() {
  return <h1>Hello World</h1>
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

2. Hello world! (JSX -> JS)

import { jsx as _jsx } from "react/jsx-runtime"

function App() {
  return _jsx("h1", { children: "Hello world" })
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

위의 예시와는 달라진 모습으로 변환된 모습을 볼 수 있다.