React ๊ณต๋ถ€ํ•˜๊ธฐ 5 - Reference

## Reference (Ref) ํŠน์ • DOM์š”์†Œ์— ์ž‘์—…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ id๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ, React์—์„œ DOM์— ์ด๋ฆ„์„ ๋‹ค๋Š” ๋ฐฉ์‹์ด ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์ด ๋ฐ”๋กœ ref (Reference)๋‹ค. ๋ฐ˜๋“œ์‹œ, `DOM์— ์ง์ ‘์ ์œผ๋กœ ์ ‘๊ทผํ•˜์—ฌ ์กฐ์ž‘์ด ํ•„์š”ํ•  ๋•Œ ๋งŒ ์ด์šฉํ•ด์•ผ ํ•œ๋‹ค.` ### ์ปดํผ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ ```javascript import React, ...

Read

React ๊ณต๋ถ€ํ•˜๊ธฐ 4 - Event

## ์ด๋ฒคํŠธ ๋ฆฌ์•กํŠธ์˜ ์ด๋ฒคํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ HTML์˜ ์ด๋ฒคํŠธ์™€ ๋น„์Šทํ•˜์ง€๋งŒ, ์ฃผ์˜์‚ฌํ•ญ์ด ๋ช‡๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. 1. ์ด๋ฒคํŠธ ๋ช…์€ ์นด๋ฉœ ์ผ€์ด์Šค๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค. `onclick` โ†’ `onClick` 2. ์ด๋ฒคํŠธ์— ์‹คํ–‰ํ•  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ณ , ํ•จ์ˆ˜ํ˜•ํƒœ์˜ ๊ฐ’์„ ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค. 3. DOM์š”์†Œ์—๋งŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. Custom Component๋Š”...

Read

React ๊ณต๋ถ€ํ•˜๊ธฐ 3 - Component

## ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ณธ์ ์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์ž. ```javascript import React, {Component} from 'react'; class MyComponent extends Component{ render() { return ( <div className='hello'> ...

Read

React ๊ณต๋ถ€ํ•˜๊ธฐ 2 - JSX

## Create-react-app ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์‹œ์ž‘ ``` yarn global add create-react-app create-react-app hello-react cd hello-react yarn start ``` ### app.js์˜ ๊ตฌ์กฐ ```javascript import React from 'react'; import logo fr...

Read

React ๊ณต๋ถ€ํ•˜๊ธฐ 1 - background

## ๋ฆฌ์•กํŠธ ์š”์•ฝ ๊ธฐ์กด์— ๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜ ํ”Œ๊ฒŒ์ž„์›Œํฌ๋“ค์ด ์žˆ์—ˆ๋Š”๋ฐ, ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์€ MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) ์•„ํ‚คํ…์ณ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ๋˜์—ˆ๋‹ค. ![MVC](https://mdn.mozillademos.org/files/1...

Read