React-window: ์Šคํฌ๋กค์ด ๊ฒฝ๋ จ์ ์ž„

์— ๋งŒ๋“  2019๋…„ 06์›” 16์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: bvaughn/react-window

Lists์— ๋Œ€ํ•œ Material-UI ๋ฌธ์„œ์—์„œ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. FixedSizeList์˜ ๊ฐ„๋‹จํ•œ ์˜ˆ๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๊ณ  ํ•˜๋Š”๋ฐ ์Šคํฌ๋กค์ด ๋„ˆ๋ฌด ํž˜๋“ค์–ด์š”. ๋ชฉ๋ก์„ ์•„๋ž˜๋กœ ์Šคํฌ๋กคํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์œ„์•„๋ž˜๋กœ ์ ํ”„ํ•˜๊ณ  onScroll ์•ž๋’ค๋กœ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐ˜๋ณต์ ์œผ๋กœ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์—ฌ๊ธฐ์„œ ๋ญ˜ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋‹ˆ?

<FixedSizeList
    direction="vertical"
    itemData={availableLanguages} // array of objects
    height={300}
    width={'100%'}
    itemSize={30} // I think this is irrelevant with ListItem?
    itemCount={availableLanguages.length}
    onScroll={this.handleOnScroll} // added this just to debug what was going on
>
{({ index, data }) => (
    <ListItem key={index} dense button divider={index < data.length}>
        <ListItemText
            primary={data[index].description}
            secondary={data[index].abbreviation}
        />
    </ListItem> 
)}
</FixedSizeList>
๐Ÿ‘€ needs info

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

style ์†Œํ’ˆ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์•ˆ๋˜๋ฉด ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์žฌํ˜„์„ ์ฃผ์‹œ๋ฉด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๋ถ€๋ถ„ ์ฝ”๋“œ ์˜ˆ์ œ์—์„œ ์ถ”์ธกํ•˜๋Š” ๊ฒƒ์ด ์‹œ๊ฐ„์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

style ์†Œํ’ˆ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์•ˆ๋˜๋ฉด ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์žฌํ˜„์„ ์ฃผ์‹œ๋ฉด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๋ถ€๋ถ„ ์ฝ”๋“œ ์˜ˆ์ œ์—์„œ ์ถ”์ธกํ•˜๋Š” ๊ฒƒ์ด ์‹œ๊ฐ„์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ์…€ ๋ Œ๋”๋Ÿฌ์™€ ๊ฐ™์€ ์ธ๋ผ์ธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์ง€ ๋ง๋ผ๊ณ  ์กฐ์–ธํ•ฉ๋‹ˆ๋‹ค.

style={style} ์ถ”๊ฐ€ํ•˜๋ฉด ์Šคํฌ๋กค ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์ด ๊ฐ€๋Šฅํ•œ ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ์ž‘๋™ํ•˜๋„๋ก ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ง€๊ธˆ ๊ทธ๊ฒƒ์˜ ๋‚ด์žฅ์„ ๋ฆฌํŒฉํ† ๋งํ•  ๊ฒƒ์ด๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰