<div id="readability-page-1" class="page"><div><h2 id="코드가-넘나-길어진다면-import--export-사용해보기">코드가 넘나 길어진다면 import / export 사용해보기</h2>
<h2 id="import--export-문법">import / export 문법</h2>
<p>=&gt; 바닐라js에서도 굉장히 많이 보이는 문법이었다.<br>
=&gt; 대략적으로 어떤 기능이겠지 싶긴 했는데 정확히 알게 되었다.</p>
<p>코드가 너무 길어서 다른 파일로 빼고 싶을 때!!!!</p>
<p>내뱉으려고 할 때,</p>
<pre><code><span>var</span> name <span>=</span> <span>'Kim'</span><span>;</span>

<span>export</span> <span>default</span> name</code></pre>
<p>=&gt; 'Kim' 이라는게 ㅈㄴ 유용해</p>
<p>=&gt; 어디서든 이제 import로 쓸 수 있음</p>
<pre><code><span>import</span> name <span>from</span> <span>'./data.js'</span><span>;</span>

<span>{</span>name<span>}</span></code></pre>
<h2 id="규칙">규칙</h2>
<h3 id="1-보통-맨-마지막에-쓴다">1. 보통 맨 마지막에 쓴다.</h3>
<h3 id="2-꼭-한-번-밖에-못-쓴다">2. 꼭 한 번 밖에 못 쓴다.</h3>
<h3 id="3-그래서-변수-여러개를-쓰려면">3. 그래서 변수 여러개를 쓰려면</h3>
<pre><code>var name <span>=</span> <span>'Kim'</span><span>;</span>
var name2 <span>=</span> <span>'Park'</span><span>;</span>

export <span>{</span>name<span>,</span> name2<span>}</span>


<span>import</span> <span>{</span>name<span>,</span> name2<span>}</span> <span>from</span> <span>'./data.js'</span><span>;</span>
<span>{</span> name <span>}</span>
<span>{</span> name2 <span>}</span></code></pre>
<p>=&gt; 보통 많지는 않다.</p>
<p><img src="https://velog.velcdn.com/images%2F2taesung%2Fpost%2F242747ed-979a-4048-aba5-d0aaca5164d8%2Fimage.png"></p></div></div>

2taesung.log

Taesung Lee

코드가 넘나 길어진다면 import / export 사용해보기
import / export 문법
=> 바닐라js에서도 굉장히 많이 보이는 문법이었다.
=> 대략적으로 어떤 기능이겠지 싶긴 했는데 정확히 알게 되었다.
코드가 너무 길어서 다른 파일로 빼고 싶을 때!!!!
내뱉으려고 할 때,
var name = 'Kim';
export default name
=> 'Kim' 이라는게 ㅈㄴ 유용해
=> 어디서든 이제 import로 쓸 수 있음
import name from './data.js';
{name}
규칙
1. 보통 맨 마지막에 쓴다.
2. 꼭 한 번 밖에 못 쓴다.
3. 그래서 변수 여러개를 쓰려면
var name = 'Kim';
var name2 = 'Park';
export {name, name2}
import {name, name2} from './data.js';
{ name }
{ name2 }
=> 보통 많지는 않다.

[React] 코드가 넘나 길어진다면 import / export 사용해보기

댓글