2021. 9. 13. 07:01ใ๐ TIL
https://junior-datalist.tistory.com/193
๐ <pre/> ํ๊ทธ๋ฅผ ์ฌ์ฉํ JSON ๊ฐํ์ ํ๊ณ
์ด ๋ ์ <pre/> ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ json ๋ฐ์ดํฐ์ ๊ฐํ์ ์ ์ฉํ ์ ์์๋ค.
๋ฌธ์ ๋ <pre/> ํ๊ทธ๋ฅผ ์ ์ฉํ๋ฉด์ ์ฌ๋ฌ ์ฌ์ด๋์ดํํธ๊ฐ ๋ํ๋ฌ๋๋ฐ ์ฐ์ div ๋ด๋ถ ๊ธ์๊ฐ, div ๋ฅผ ๋ซ๊ณ ๋๊ฐ๊ธฐ ์์ํ๋ค.
autoflow ๋ ์ ์ฉํ๊ณ ๋ณ์ง์ ๋คํ์ง๋ง ๋จ์๊ฑด ์ฒ์ฐธํ div ๋ฅผ ๋ซ๊ณ ๋๊ฐ ๊ธ์๋ค ๋ฟ์ด์๋ค..
pre ํ๊ทธ๋ฅผ ์ ์ฉ ํ ๋ฐ์ํ ๋ฌธ์ ๋ผ ๋ ์ด์ pre ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ ๋ต์ด ์๋๋ผ ์๊ฐํ๋ค.
๋ค๋ฅธ ๋ฐฉ๋ฒ์ ๊ถ๋ฆฌํด์ผํ๋๋ฐ, ์์ธ๋ก '์ ๋ต'์ด ๊ฐ๊น์ด ๊ณณ์ ์์๋ค.
โ split('\n') ๊ณผ map(), <br/> ์ ์ฌ์ฉํ JSON ๊ฐํ
1. ์ฐ์ , ๊ฐํ์ด ํ์ํ ๋ฌธ์์ด์ JSON ๋ด๋ถ์์ ๋ฏธ๋ฆฌ '\n' ๋ฅผ ํ์ํด์ค๋ค.
2. JSON ๋ฌธ์์ด์ data ๋ณ์์ ๋ด์ JSX, TSX์์ split('\n') ํจ์ ์ฒ๋ฆฌ๋ฅผ ํ๋ค.
3. ๊ทธ๋ ๊ฒ ๋๋ฉด ๊ฐํ์ด ํ์ํ ์ง์ ์ ๊ธฐ์ค์ผ๋ก ๋ฌธ์์ด์ด ๋๋์ด์ง ๋ฐฐ์ด์ด ์์ฑ๋๋ค.
4. ํด๋น ๋ฐฐ์ด ๊ฐ๊ฐ์ ์์๋ฅผ map() ํจ์๋ก ๋๋ฆฌ๊ณ ๋ด๋ถ์์ <br/> ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด, ๊ฐ๋ฐ์๊ฐ ์๋ํ ์ง์ ์์ ๊น๋ํ๊ฒ ๊ฐํ ์ฒ๋ฆฌ๊ฐ ๋๋ค.
data.split('\n').map(line => {
return (<span>{line}<br/></span>)
})
'๐ TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
210912 ๊ฐ๋ฐ๊ธฐ๋ก: ๋ฆฌ์กํธ, ์ผํญ์ฐ์ฐ์ ์์ด jsx ๊น๋ํ ๋ฆฌํด (0) | 2021.09.13 |
---|---|
210911 ๊ฐ๋ฐ๊ธฐ๋ก: React ์์ (๋์ ์ผ๋ก) ์ด๋ฏธ์ง ์ฌ์ฉํ๊ธฐ (0) | 2021.09.13 |
210909 ๊ฐ๋ฐ๊ธฐ๋ก: src์ dist ์ฐจ์ด (0) | 2021.09.09 |
210908 ๊ฐ๋ฐ๊ธฐ๋ก: JSON ์ ์ค๋ฐ๊ฟ ๋ฌธ์ (0) | 2021.09.09 |
210907 ๊ฐ๋ฐ๊ธฐ๋ก: webpack ํ๋ฌ๊ทธ์ธ ๊ณต๋ถ์ค (0) | 2021.09.08 |