Community

๐Ÿ“Œ 8 React Tips & Tricks

1. key ๊ฐ’์„ ๊ณ ๋ฏผํ•˜์ง€ ๋งˆ์„ธ์š”. ๐Ÿค” someData.map(item => Hello!) ๐Ÿ˜ฒ React.Children.toArray(someData.map(item => Hello!) 2. Fragment๋ฅผ ์•ฝ์‹์œผ๋กœ ํ‘œ๊ธฐํ•  ์ˆ˜ ์žˆ์–ด์š”. ๐Ÿค” ๐Ÿ˜ฒ 3. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘๊ฒŒ ์œ ์ง€ํ•˜์„ธ์š”. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž‘์œผ๋ฉด ๋ฒ„๊ทธ๋ฅผ ๋ฐœ๊ฒฌํ•˜๊ธฐ ์šฉ์ดํ•˜๊ณ  ๊ฐ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฌด์—‡์„ ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์–ด์š”. 4. true์ธ ํ”„๋กœํผํ‹ฐ๋Š” ๊ฐ’์„ ํ• ๋‹นํ•˜์ง€ ์•Š์•„๋„ ๋™์ž‘ํ•ด์š”. ๐Ÿค” ๐Ÿ˜ฒ 5. ๋‹จ์ˆœํ•œ ํ”„๋กœํผํ‹ฐ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜์„ธ์š”. 6. ์ƒ์„ฑ์ž์—์„œ super๋ฅผ ์ œ๊ฑฐํ•ด๋„ ๊ดœ์ฐฎ์•„์š”. 7. ๋กœ์ง์€ JSX ๋ฐ–์œผ๋กœ ๊บผ๋‚ด๋‘์„ธ์š”. ๐Ÿค” { /* some logic */ }}/> ๐Ÿ˜ฒ 8. ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ํ•จ์ˆ˜๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์–ด์š”. ๐Ÿ˜ฒ => SomeComponent()

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค