Loading...
2019. 11. 2. 15:42

[React.ts] React๋ฅผ Typescript๋กœ ์‹œ์ž‘ํ•ด๋ณด๊ธฐ - Props, State

์ด๋ฒˆ ๊ธ€์—์„œ๋Š” Props, State๋ฅผ Typescript์—์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Javascript์—์„œ๋Š” state๋ฅผ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•ด ์ƒ์„ฑ์ž๋ฅผ ์‚ฌ์šฉํ•˜์˜€๊ณ , ํ•ด๋‹น ์ƒ์„ฑ์ž์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ Props๋ฅผ ๋„ฃ์–ด์ฃผ์—ˆ์œผ๋ฉฐ Props๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด, ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ๋ฐ‘์— Props ํƒ€์ž…์„ ์ •์˜ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. import React, { Component } from 'react'; class Header extends Component { constructor(props) { super(props); this.state = { ... }; } render() { return ( Practice App ); } } export default Header; ํ•˜์ง€๋งŒ Typescript์—์„œ ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ• ..

2019. 11. 2. 14:42

[React.ts] React๋ฅผ Typescript๋กœ ์‹œ์ž‘ํ•ด๋ณด๊ธฐ - ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ

์•ˆ๋…•ํ•˜์„ธ์š”. Typescript๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ฒซ ๊ธ€์ž…๋‹ˆ๋‹ค. Typescript์˜ ์ฒซ ์‹œ์ž‘์„ React ํ”„๋กœ์ ํŠธ๋กœ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” ์ œ๊ฐ€ ์ด๋ฒˆ์— ๋ฉ”์ธ ํ™ˆํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ฆฌ๋‰ด์–ผ ํ•˜๊ฒŒ ๋˜๋ฉด์„œ ์ง€๋‚œ 2๋…„ ๋™์•ˆ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋˜ React๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ์š”. ๋น„๋ก ๋งŒ๋“œ๋Š” ์ž ๊น ๋™์•ˆ์ด์—ˆ์ง€๋งŒ ๋ฐฐ์›€๊ณผ ๊ฐ™์ด ๋”๋ถˆ์–ด ์ง„ํ–‰ํ•˜๊ฒŒ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— React์˜ ๋ณ€๊ฒฝ์ ๋„ ๊ฐ™์ด ์‚ดํŽด๋ด„๊ณผ ๋”๋ถˆ์–ด์„œ ์ด๋ฒˆ์—๋Š” Typescript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Create react app React๋ฅผ ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ create-react-app์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Typescript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ์—ญ์‹œ ์ด ๋ช…๋ น์–ด๋กœ ์‰ฝ๊ณ  ํ•œ ๋ฒˆ์— ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. $ create-react-app [app..