useState 컴포넌트에서 동적인 값을 상태(state)라고 합니다. useState를 사용해서 컴포넌트 내부에서 상태관리를 할 수 있습니다. 배열 비구조화 할당문법을 사용한 형태입니다. 첫번째 원소는 현재상태, 두번째 원소는 setter 입니다. setter를 사용하면 데이터도 변경할 수있고, 컴포넌트도 리렌더링 할 수있습니다. const [number, setNumber] = useState(0) setState()에 callback 함수 setState에 콜백함수를 넣으면 콜백함수의 인자값으로 이전state값을 가져올 수 있다. return을 하면 새로운 state를 지정할 수 있다. setState((prev) => { return !prev }) useState 초기값으로 callback 함수..

리액트 배경 자바스크립트로 UI를 제어하는 경우 간단하게 counter를 만든다고 가정했을 때 제어 원하는 dom select -> 이벤트 핸들러 -> dom 업데이트 라는 과정을 거칩니다. 규모가 커지는경우 많은 DOM을 직접 건드리면서 작업을하면 코드가 난잡해집니다. 리액트는 상태가 변경되었을 때 기존 dom을 날리고 새로운 dom을 보여준다는 개념에서 시작되었습니다. 매번 상태가 변경될 때마다 새롭게 만들게 되면 속도가 엄청나게 느려집니다. 리액트는 상태가 변경되면 Virtual DOM을 사용해서 업데이트가 필요한 곳의 UI를 렌더링 합니다. 그리고 실제 DOM과 비교하여 다른부분에 대해서만 실제 DOM에 패치시켜줍니다. Virtual DOM 개념 메모리 상에 가상으로 존재하는 dom 왜 필요할까 ..

redux redux는 data 관리를 도와주는 역할을 하기위해 만들어졌다. store data를 저장하는 곳 첫번째 argument는 리듀서가 들어가고, 두번째(옵셔널)는 initialState가 들어간다 import { createStore } from 'redux' let store = createStore(reducer); store.getState(); 현재의 state를 전달해준다. store.subscribe(함수) store에 변화가 일어날 때(state값이 변경될 때) 자동으로 실행된다. store.dispatch reducer함수를 실행하기 위한 함수, 상태변경을 일으키기 위한 유일한 방법 Action 타입과 payload를 받는다. countStore.dispatch({ type: "..