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>
style
์ํ์ ์ฌ์ฉํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
๊ทธ๋๋ ์๋๋ฉด ์คํ ๊ฐ๋ฅํ ์ฌํ์ ์ฃผ์๋ฉด ์ดํด๋ณด๊ฒ ์ต๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๋ถ๋ถ ์ฝ๋ ์์ ์์ ์ถ์ธกํ๋ ๊ฒ์ด ์๊ฐ์ ๋ง์ด ์ฌ์ฉํ์ง ์๋๋ค๋ ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค.
๋ํ ์ ๋ ๋๋ฌ์ ๊ฐ์ ์ธ๋ผ์ธ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ๋ง๋ผ๊ณ ์กฐ์ธํฉ๋๋ค.
style={style}
์ถ๊ฐํ๋ฉด ์คํฌ๋กค ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
๋๋ ์ด๊ฒ์ด ๊ฐ๋ฅํ ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ผ๋ก ์๋ํ๋๋ก ๋ ธ๋ ฅํ์ต๋๋ค. ๋๋ ์ง๊ธ ๊ทธ๊ฒ์ ๋ด์ฅ์ ๋ฆฌํฉํ ๋งํ ๊ฒ์ด๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
style
์ํ์ ์ฌ์ฉํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.๊ทธ๋๋ ์๋๋ฉด ์คํ ๊ฐ๋ฅํ ์ฌํ์ ์ฃผ์๋ฉด ์ดํด๋ณด๊ฒ ์ต๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๋ถ๋ถ ์ฝ๋ ์์ ์์ ์ถ์ธกํ๋ ๊ฒ์ด ์๊ฐ์ ๋ง์ด ์ฌ์ฉํ์ง ์๋๋ค๋ ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค.