๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • What would life be If we had no courage to attemp anything?

react2

[React] ref, useRef ref? JS๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” ํŠน์ • DOM์„ ์„ ํƒํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ์—์„œ getElementById, querySelector ๊ฐ™์€ DOM Selector ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ DOM์„ ์„ ํƒ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ DOM์„ ์ง์ ‘ ์„ ํƒํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ์ƒ๊ธฐ๋ฉด ref๋ฅผ ํ™œ์šฉ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ **ref**๋ฅผ ์‚ฌ์šฉ ํ•  ๋•Œ์—๋Š” **useRef** ๋ผ๋Š” Hook ํ•จ์ˆ˜ ์‚ฌ์šฉ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ **React.createRef ๋ผ๋Š” ํ•จ์ˆ˜ ์‚ฌ์šฉ** ํฌ์ปค์Šค๋ฅผ ์žก์œผ๋ ค๋ฉด nameInput.current.focus() ํ˜•ํƒœ๋กœ ์ž‘์„ฑ const nameInput = useReft(); const onClick = () => { nameInput.current.focus(); } return( ํด๋ฆญ ) use.. 2023. 1. 24.
[React] port ๋ฒˆํ˜ธ ๋ณ€๊ฒฝํ•˜๊ธฐ ๋ฐฉ๋ฒ•1. ๋ช…๋ น์–ด๋กœ ์‹คํ–‰ (1ํšŒ์„ฑ) PORT=[์ˆซ์ž] npm run start ๋ฐฉ๋ฒ•2. package.json ์ˆ˜์ • window ... "scripts": { "start": "set PORT=3002 && react-scripts start", } ... ๋ฐฉ๋ฒ•3. ํ”„๋กœ์ ํŠธ๋ช…/node_modules/react-scripts/scripts/start.js ์ˆ˜์ •ํ•˜๊ธฐ const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3002;// ์ˆ˜์ • const HOST = process.env.HOST || '0.0.0.0'; ๋ฐฉ๋ฒ•4. .env ํŒŒ์ผ ์ƒ์„ฑํ•˜๊ณ  port ์„ค์ •ํ•˜๊ธฐ ํ”„๋กœ์ ํŠธ๋ช…/.env PORT=3002 ๋ช…๋ น์–ด๋กœ ์‹คํ–‰ npm run start Reference [#. .. 2023. 1. 23.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”