Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transition 327 #318

Merged
merged 2 commits into from
Dec 7, 2020
Merged

Transition 327 #318

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed61563
🔖 SeonHyungJo / Translate / Update translate-327
SeonHyungJo Nov 20, 2020
4cd9d21
Merge branch 'master' into transition-327
BKJang Dec 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ You can download the PDF and Epub version of this repository from the latest run
|324| [Reactjs와 함께 Typescript를 사용할 때 장점?](#Reactjs와-함께-Typescript를-사용할-때-장점)|
|325| [Context API State Management 사용 시 페이지 새로 고침을 해도 사용자가 인증된 상태를 유지하는 방법은?](#Context-API-State-Management-사용-시-페이지-새로-고침을-해도-사용자가-인증된-상태를-유지하는-방법은)|
|326| [새로운 JSX transform의 장점은?](#새로운-JSX-transform의-장점은)
|327| [How does new JSX transform different from old transform?](#how-does-new-jsx-transform-different-from-old-transform)
|327| [새로운 JSX transform과 예전 transform의 차이점은?](#새로운-JSX-transform과-예전-transform의-차이점은)

## Core React

Expand Down Expand Up @@ -5844,11 +5844,11 @@ const loadUser = async () => {

**[⬆ Back to Top](#table-of-contents)**

327. ### How does new JSX transform different from old transform?
327. ### 새로운 JSX transform과 예전 transform의 차이점은?

The new JSX transform doesn’t require React to be in scope. i.e, You don't need to import React package for simple scenarios.
새로운 JSX transform은 scope 내 React가 필요 없다. 즉, 간단한 경우에는 React 패키지를 가져올 필요 없다.

Let's take an example to look at the main differences between the old and the new transform,
예전 transform과 새로운 transform의 주요 차이점을 살펴보자.

**Old Transform:**

Expand All @@ -5860,7 +5860,7 @@ function App() {
}
```

Now JSX transform convert the above code into regular JavaScript as below,
이제 JSX transform은 아래와 같이 일반적인 JavaScript로 변환한다.

```js
import React from 'react';
Expand All @@ -5872,15 +5872,15 @@ function App() {

**New Transform:**

The new JSX transform doesn't require any React imports
새로운 JSX transform에는 React가 필요하지 않다.

```js
function App() {
return <h1>Good morning!!</h1>;
}
```

Under the hood JSX transform compiles to below code
위의 코드는 JSX transform시 아래의 코드로 컴파일된다.

```js
import {jsx as _jsx} from 'react/jsx-runtime';
Expand All @@ -5890,6 +5890,6 @@ function App() {
}
```

**Note:** You still need to import React to use Hooks.
**Note:** Hook을 사용하려면 여전히 React를 가져와야 한다.

**[⬆ Back to Top](#table-of-contents)**