import './App.css';
import { useState } from 'react';
function App() {
const [st, setSt] = useState(0);
return (
<div className="App">
<button
={() => setSt(st + 1)}
>
눌러봐
</button>
<ul id="board">
{
new Array(st).fill(true)
.map((_, count) => {
return (
<li
key={count} // 리액트에서 컴포넌트를 식별해서 관리하기 위해서 key가 필요함
style={{
fontSize: `${(100 + 10 * count)}%`
}}
>
응 계속 눌러봐 ㅋㅋ{'ㅋ'.repeat(count)}
</li>
)
})
}
</ul>
</div>
);
}
export default App;
해당 댓글은 삭제되었습니다.
Li를 늘리고 싶어?
그럼 일케 짜면됨
배열 인덱스가 0부터 시작이니 그거만 수정해주면 됨 리액트는 보통 이렇게 처리함
글고 리액트는 자체 가상돔을 쓰고 컨텍스트를 유지중이라서 map으로 li를 만든다고 이전꺼 모두 삭제하고 다시 만들지 않음 달라진점만 찾아서 수정함
별 차이 없음. 그냥 간단히 이전 컴포넌트 구조를 가지고 있다가 니가 뭔가 리액트를 통해서 수정하면 그걸 리액트가 확인하고 달라진 부분만 diff비교해서 수정하는거임 니가 짠거처럼 짜면 리액트를 사용하는게 아니라 제이쿼리를 쓰는거임 리액트 컴포넌트가 제어하는 가상 dom이 아니라 직접 dom을 조절하니까 리액트 입장에서는 니가 append한 node
제 스승님이십니다
가 뭐하는지도 모름 추적도 못하고 변경해도 리액트 입장에서는 지 밖의 뭔가가 지들끼리 난리치는 거임 이걸 제어 비제어 개념으로 설명하는데 비제어의 경우 특수한 상황에 쓰는 편법이라고 생각하면됨 ㅇㅇ
배열 생성비용이 걱정되면 컴포넌트 return 밖으로 끄집어 내서 for문 돌려서 li를 바로 만들면됨 애초에 li dom 은 무조건 만들어야하는데 반복한다는 것의 비용을 따질 이유는 없음