210910 ๊ฐœ๋ฐœ๊ธฐ๋ก: JSON ์ค„๋ฐ”๊ฟˆ์˜ ์ตœ๊ณ ์˜ ์„ ํƒ

2021. 9. 13. 07:01ใ†๐Ÿ“” TIL

https://junior-datalist.tistory.com/193

 

210908 ๊ฐœ๋ฐœ๊ธฐ๋ก: JSON ์˜ ์ค„๋ฐ”๊ฟˆ ๋ฌธ์ œ

๐ŸŒ€ ์ƒํ™ฉ JSON ๊ฐ์ฒด๋กœ ๋ฐ›์€ ๋ฌธ์žฅ ๋‚ด์šฉ์„ ๊ฐœํ–‰(์ค„๋ฐ”๊ฟˆ)ํ•˜์—ฌ html(jsx)์— ์ถœ๋ ฅํ•ด์•ผํ•œ๋‹ค. ๐Ÿ“Œ ๋ฌธ์ œ \n ์ด๋‚˜ \\n , ์‹ฌ์ง€์–ด ํƒœ๊ทธ๊นŒ์ง€ JSON ๋ฌธ์žฅ์— ๋„ฃ์–ด๋ดค์ง€๋งŒ, ์ค„ ๋ฐ”๊ฟˆ ์ฒ˜๋ฆฌ ์—†์ด ๋ชจ๋‘ ํ•œ ์ค„๋กœ ์ถœ๋ ฅ๋๋‹ค. โœ… ํ•ด

junior-datalist.tistory.com

๐Ÿ“Œ  <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>)
	})