useState

[React] List를 컴포넌트로 렌더링

리액트에서는 state에 관련있는 모든 변수에서 불변성 유지가 상당히 중요하다. 단일 Object의 경우 추가에도 수정에도 speard(...)를 사용했지만 List의 경우에는 speard와 더불어 filter와 map을 주로 사용한다. List useState의 추가, 수정, 제거 //객채의 id를 ref로 사용한다. const nextId = useRef(1); //user를 담는 List const [userList, setResult] = useState([]); const [text, setText] = useState({ id: nextId.current, nickname: "", realname: "", isActive: false, }); const onChange = (e) ... //i..

[React] Hook과 상태관리(useState)

* 이 포스팅은 플러터와 비교하며 작성했으므로, 플러터를 모른다면 불편할 수 있다. 상태관리 플러터를 어느정도로 배웠다면 리액트의 상태 관리 개념은 매우 쉽게 이해할 것이다. 익숙한 setState도 리액트에서 동일한 개념과 명칭으로 사용되며, 클래스에서만 사용가능하다는 점도 동일하다. 플러터에서는 stateful과 stateless 클래스가 기본으로 제공되었다면 리액트에서는 상태가 필요할 땐 클래스를, 상태가 필요하지 않을 때는 function을 사용한다. 하지만 플러터의 그것보다 귀찮고 Stateful Builder처럼 편리한 위젯도 기본으로 존재하지 않는다. 플러터의 Provider와 GetX가 외부 개발자에 의해 개발되고 널리 사용된 것처럼, 리액트에서도 Hook이라는 패키지로 상태 관리가 매우 ..