[React] πŸ˜ƒ react-dom에 λŒ€ν•΄ μ΄ν•΄ν•˜κΈ°

tngusglasoΒ·2022λ…„ 8μ›” 24일
6

⌨️ React

λͺ©λ‘ 보기
1/1
post-thumbnail

πŸ–₯ Frontend 개발자 첫번째 λ©΄μ ‘

였늘 처음으둜 ν”„λ‘ νŠΈμ—”λ“œ 개발자 면접을 λ΄€λ‹€.
CTOλ‹˜λ„ λ„ˆλ¬΄ 쒋은 뢄이셨고 말을 잘 λ“€μ–΄μ£Όμ…”μ„œ, 첫 면접이고 말이 정리가 μ•ˆλμŒμ—λ„ λΆˆκ΅¬ν•˜κ³  비ꡐ적 νŽΈν•œ λΆ„μœ„κΈ°μ—μ„œ λ‚΄κ°€ ν•˜κ³  싢은 말을 λ―Έμˆ™ν•˜κ²Œλ‚˜λ§ˆ ν•˜κ³  λ§ˆλ¬΄λ¦¬ν•  수 μžˆμ—ˆλ˜ 것 κ°™λ‹€.
λ‹€ 기얡에 남고 쒋은 말을 많이 λ“€μ–΄μ„œ ν•©λΆˆ 여뢀에 상관없이 μ†Œμ€‘ν•œ μ‹œκ°„μ΄ 될 것 κ°™κΈ°λŠ” ν•˜μ§€λ§Œ, κ·Έλž˜λ„ react에 κ΄€ν•΄μ„œ 두어가지 정도 μ§ˆλ¬Έμ„ λ°›μ•˜λŠ”λ° μ•„μ˜ˆ μž…λ„ λͺ»λ—€ 질문이 μžˆμ–΄μ„œ κΈ°λ‘ν•˜κ³ μž ν•œλ‹€.
주된 μ—…λ¬΄λŠ” react-nativeλ₯Ό ν†΅ν•œ μ•± 개발둜 λ³΄μ˜€λŠ”λ° κ·Έλž˜μ„œμΈμ§€ JavaScript보닀 react에 λŒ€ν•œ μ§ˆλ¬Έμ„ κ°„λ‹¨ν•˜κ²Œ λ‘κ°œ 정도 μ£Όμ…¨λ‹€.
정말 기초적인 κ²ƒμ΄μ—ˆλŠ”λ°λ„ 쑰리있게 λŒ€λ‹΅μ„ ν•˜μ§€ λͺ»ν•˜λŠ” λ‚΄ μžμ‹ μ„ 보고 λ°˜μ„±μ„ ν•œ μ‹œκ°„μ΄κΈ°λ„ ν–ˆλ‹€!
λ°˜μ„±λ§Œ ν•˜κ³  μ΄λ ‡κ²Œ λ„˜κΈ°λ©΄ μ˜λ―Έκ°€ 없기에 λ°©μΉ˜ν•΄λ’€λ˜ λΈ”λ‘œκ·Έμ— κΈ°λ‘ν•΄λ‘κ³ μž ν•œλ‹€.

πŸ’‘react-dom μ΄ν•΄ν•˜κΈ°

index.js 파일

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(
	<React.StrictMode>
  		<App />
  	</React.StrictMode>,
  	document.getElementById('root')
);

ReactλŠ” 순수 μžλ°”μŠ€ν¬λ¦½νŠΈμ΄κ³ , 이 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ΄μš©ν•΄ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ–΄λ‚˜κ°„λ‹€.
μ‹€μ œλ‘œ λΈŒλΌμš°μ €κ°€ 이해할 수 μžˆλŠ” 것은 html, css, JavaScript 뿐이며, μ΄κ²ƒλ“€λ§Œ μ΄μš©ν•  수 μžˆλ‹€.

κ·Έλž˜μ„œ μœ„μ˜ μ½”λ“œμ™€ 같은 식은 바벨을 μ΄μš©ν•΄μ„œ 순수 μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ λ³€ν™˜μ΄ λœλ‹€!
그리고 λ‚˜μ„œ μš°λ¦¬κ°€ λ§Œλ“  μ»΄ν¬λ„ŒνŠΈλ₯Ό htmlκ³Ό μ—°κ²°ν•˜λŠ” μž‘μ—…μ„ ν•΄μ€˜μ•Όν•˜λŠ”λ° 이것을 ν•΄μ£ΌλŠ” 것이 λ°”λ‘œ ✨react-domβœ¨μ΄λ‹€.
κ·Έλž˜μ„œ μ‚¬μš©μžμ—κ²Œ ꢁ극적으둜 λ°°ν¬λ˜μ–΄μ§€λŠ” 것은 index.html이닀.

index.html 파일

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <title>App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

body에 보면 <div>νƒœκ·Έ λ‹¬λž‘ ν•˜λ‚˜κ°€ μžˆλŠ” κ±Έ λ³Ό 수 μžˆλ‹€.

<div id="root"></div>

이것은 rootλΌλŠ” idλ₯Ό μ΄μš©ν•΄μ„œ μš°λ¦¬κ°€ JavaScript와 연결해쀄건데
그것을 κ°€λŠ₯ν•˜κ²Œ ν•˜λŠ” 것이 react-dom이라고 μ•„κΉŒ μ–ΈκΈ‰ν–ˆλ‹€.


λ‹€μ‹œ index.js 파일둜 λŒμ•„μ˜€λ©΄,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(
	<React.StrictMode>
  		<App />
  	</React.StrictMode>,
  	document.getElementById('root')
);

import ReactDOM from 'react-dom';

➑️ react-domμ΄λΌλŠ” λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ ReactλΌλŠ” 클래슀λ₯Ό import ν•΄μ˜¨λ‹€(κ°€μ Έμ˜¨λ‹€).


ReactDOM.render(
	<React.StrictMode>
  		<App />
  	</React.StrictMode>,

➑️ κ°€μ Έμ˜¨ ReactDOMμ΄λΌλŠ” ν΄λž˜μŠ€μ— μžˆλŠ” render ν•¨μˆ˜λ₯Ό μ΄μš©ν•΄μ„œ


	document.getElementById('root')
);

➑️ document(νŽ˜μ΄μ§€)에 μžˆλŠ” idκ°€ rootλΌλŠ” μš”μ†Œλ₯Ό κ°€μ Έμ™€μ„œ
즉, index.html에 μžˆλŠ” <div id="root"></div>
이 μš”μ†Œμ— 우리의 root μ»΄ν¬λ„ŒνŠΈλ₯Ό μ—°κ²°μ‹œμΌœμ€€λ‹€.

πŸ’‘ κ·Έλž˜μ„œ, render ν•¨μˆ˜κ°€ 호좜이 되면 index.html에 μžˆλŠ”
<div id="root"></div> μ—¬κΈ° 이 뢀뢄에 우리 μ»΄ν¬λ„ŒνŠΈκ°€ 연결이 λ˜λŠ” 것이닀!


(<React.StrictMode />λŠ” μƒλž΅μ΄ κ°€λŠ₯ν•˜λ‹€.)

ReactDOM.render(
  	<App />,
  	document.getElementById('root')
);

rootλΌλŠ” idλ₯Ό 가진 μš”μ†Œμ— 제일 μƒμœ„μ— μžˆλŠ” <App />μ΄λΌλŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό μ—°κ²°ν•˜λŠ”κ±°λ‹€! 라고 이해할 μˆ˜κ°€ μžˆλ‹€.
그리고 이 <App />μ΄λΌλŠ” 것은 App.jsx에 μ •μ˜λœ μ»΄ν¬λ„ŒνŠΈλ‹€.

app.jsx 파일

import React from 'react';
import from './app.css';

function App() {
  return <h1>hello :)</h1>;
}  

export default App;

App.jsx은 <h1>hello :)</h1>λ₯Ό 좜λ ₯ν•˜λ‹ˆκΉŒ κ·Έ helloκ°€ μ—°κ²°λ˜μ–΄μ„œ <div> νƒœκ·Έ μ•ˆμ— λ“€μ–΄μ˜¨ 것을 확인할 수 μžˆλ‹€.

μ΄λ ‡κ²Œ 제일 μƒμœ„μ˜ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ—°κ²°ν•΄μ£ΌλŠ” 것이 react-dom이닀.

πŸ’‘ κ·Έλž˜μ„œ 항상 index.js νŒŒμΌμ—μ„œ 연결을 ν•΄μ£Όκ³ ,
μ‹€μ œλ‘œ μš°λ¦¬κ°€ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ–΄λ‚˜κ°ˆ λ•ŒλŠ” app.jsxμ—μ„œλΆ€ν„° μ‹œμž‘ν•˜λ©΄ λœλ‹€.


🧐 μ—¬κΈ°μ„œ μš°λ¦¬κ°€ 배울 수 μžˆλŠ” 것은?

react μ»΄ν¬λ„ŒνŠΈ λΌλŠ” 것은 λ§ˆλ²• 같은 것이 μ•„λ‹ˆλΌ,
결ꡭ은 html둜 λ³€ν™˜μ΄ λ˜μ–΄μ„œ μ‚¬μš©μžμ—κ²Œ, λΈŒλΌμš°μ €μ—κ²Œ ν‘œκΈ°κ°€ λ˜λŠ” 것이닀!

2개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 8μ›” 24일

마침 저도 React DOMκ³Ό render에 λŒ€ν•΄μ„œ κΆκΈˆν–ˆλ˜ 점이 μƒκ²¨μ„œ μ°Ύμ•„λ³΄λŠ”λ° 많이 μ–΄λ €μ›Œμ„œ 이해가 잘 μ•ˆ κ°€λ”λΌκ΅¬μš”! 덕뢄에 μ°¨κ·Όμ°¨κ·Ό 곡뢀할 수 μžˆκ² μ–΄μš”!!!
κ°μ‚¬ν•΄μš”! :)

1개의 λ‹΅κΈ€