배열의 일부만 보여주고 버튼 누르면 더 보여주기

어떤걸 구현하시는지 정확하게는 모르겠지만 한번 구현해 볼게요!! 2개만 보여준다는게 어떤 의미인지 모르지만 map을 통해서 각 값의 조건을 추가해서 원하는 값만 보여지도록 할 수 있습니다. const [buttonOn, setButtonOn] = useState(false) const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] array.map(item => { if(buttonOn) { //전부다 보이기 return <p>{item}</p> } else { // 원하는 두 개 보이기 // 원하는 조건의 두 개는 return 하고 나머지는 return null } )) 이런식으로 하고 버튼을 눌렀을 때 setButtonOn을 통해 buttonOn을 true로 변경시켜주면 되지않을까 추측해봅니다.

여러 방법이 있는 것 같아요. 2개를 항상 먼저 보여주고 특정 상태 값에 따라 나머지 8개를 보여준다고 가정을 해보겠습니다. 저는 Javascript destructuring을 사용해서 first, second, rest 형식을 취할 것 같습니다. (https://javascript.info/destructuring-assignment) const [first, second, ...rest] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const [showRest, setShowRest] = useState(false); const onClick = () => setShowRest(true); return ( <> <button onClick={onClick}>show rest</button> {first} {second} {showRest && rest.map(r => <>{r}</>)} </> )