React ์‹œ๋ฆฌ์ฆˆ๐ŸŒ/React Native๋กœ ๋‚ ์”จ์•ฑ ๋งŒ๋“ค๊ธฐ

โ˜€๏ธReact Native๋กœ ๋‚ ์”จ์•ฑ ๋งŒ๋“ค๊ธฐ-์•„์ฃผ ๊ฐ„๋‹จํ•œ native ์ •๋ฆฌโ˜€๏ธ

@ENFJ 2021. 8. 17. 13:07

1. ๋ฆฌ์—‘ํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ๋ชจ๋“  flex box์˜ ๋””ํดํŠธ๋Š” flexDirection์ด ์ปฌ๋Ÿผ(column)=(์—ด--ํ–‰๋ ฌ ํ• ๋•Œ ์—ด)์ด๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ํ…์ŠคํŠธ๋ฅผ ์ถ”๊ฐ€ ํ• ๋•Œ๋งˆ๋‹ค. ์˜†์ค„์ด ์•„๋‹Œ ๋ฐ”๋กœ ๋‹ค์Œ ์ค„๋กœ ๋„˜์–ด ๊ฐ„๋‹ค๋Š” ๋œป. 

 * ์•„๋ž˜์‚ฌ์ง„ ์ฐธ๊ณ 

์—ด(column)

 ๋ฌผ๋ก  ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด ๋ฐ”๊พธ์–ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

flex direction ์„ ์—ด์—์„œ ํ–‰์œผ๋กœ ๋ฐ”๊พธ๋Š” ์ฝ”๋“œ

 

2. ์›น์‚ฌ์ดํŠธ์—์„œ ๋ชจ๋“  flex ๋ฐ•์Šค์˜ ๋””ํดํŠธ๋Š” ๋กœ์šฐ(row) ์—ด ์ด๋‹ค.

 

3. ๋ฆฌ์—‘ํŠธ๋„ค์ดํ‹ฐ๋ธŒ์˜ <view> ๋Š” ์›น์—์„œ <div> ๊ฐ™์€ ๊ฑฐ๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.

 

4. flex:1 ์€ ๋ชจ๋“  ๊ณต๊ฐ„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ ์˜๋ฏธํ•จ.