Notebook

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

목차 [0/8] 구구단 - state, JSX, babel, Fragment, setState, ref [1/8] 끝말잇기 - useState, class component vs function component, webpack, module, build [1/8] 끝말잇기 - useState, class component vs function component, webpack, module, build [2/8] 숫자야구. 3-1. import와 require 비교 [2/8] 숫자야구 - map, key, 컴포넌트분리, props, 메서드바인딩(this), 동작원리, 구조분해, 이벤트 [2/8] 숫자야구 끝 - rendering, shouldComponentUpdate, PureComponent, Re..

정의 useReducer는 useState보다 더욱 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook이다. reducer는 현재 상태, 그리고 업데이트를 위해서 필요한 정보를 담은 액션(action)값을 전달받아 새로운 상태를 반환하는 함수이다. reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state, action) { return { ... }; // 불변성을 지키면서 업데이트한 새로운 상태를 반환한다. } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. { type: 'INCREMENT', // 다른 값들이 필요하다면 추가로 들어감 } 카운터 구현하기 먼저 useReducer를 사용해서..

🤔기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 '불변성을 지킨다'고 한다. 다음 예시 코드에서 어떻게 불변성을 지키는지 보자. 예시코드 const array = [1, 2, 3, 4, 5]; const nextArrayBad = array; // 배열 복사X, 똑같은 배열 참조 nextArrayBad[0] = 100; console.log(array === nextArrayBad); // 똑같은 배열이기 때문에 true const nextArrayGood = [...array]; // 배열 내부의 값을 모두 복사 nextArrayGood[0] = 100; console.log(array === nextArrayGood); // 다른 배열이기 때문에 false const object ..