초보 개발자의 성장 일기

useReducer는 state를 생성하고 관리하는 도구이다. 그렇다면 state와 차이는 무엇일까? { teacher: 'James', students: ['Kim', 'Ann', 'John']. count: 3, location: [ {count: 'Korea', name: 'A'} {count: 'Australia', name: 'B'} ] } 여러개 하위값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다. 구성요소 Reducer: Action의 내용대로 변경된 state를 업데이트를 해주는 역할을 한다. Dispatch: state를 변경하기 위해 Action을 요구하는것을 말한다. Action: Dispatch의 요구 내용을 말한다. Dispatch(Action) → Reducer(Stat..

코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다. 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지한다. TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상시킨다. 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다. 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높인다. 코드가 영향을 미치는 ..

useCallback은 컴포넌트를 최적화 시켜주는 도구이다. useMemo와의 차이점 useMemo: 인자로 콜 백함수를 넣어주면 return 값을 memoization 한다. useCallback: 인자로 전달한 콜백함수 그 자체를 memoization 한다. const calculate = useCallback((num) => { return num + 1; }, [item]) useCallback으로 함수를 감싸주어 함수가 필요할 때마다 메모리에서 가져와 재사용한다. function Component() { const calculate = useCallback((num) => { return num + 1 }, [item]); return {value} } 컴포넌트 객체가 처음 렌더링 될 때만 함수..