| Immer 란 ? 리액트에서 배열이나 객체를 업데이트 해야 할 때 직접 수정은 절대 하면 안되며, 불변성을 지켜주어야 합니다. 직접 수정하는 경우 const a = { a: 1, b: 2 }; a.a = 4; 이런 방법을 다음과 같이 업데이트 해야합니다. const a = { a: 1, b: 2 }; const change = { ...a, b:3 }; 배열도 마찬가지로 push,splice등 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되며 concat, filter, map 함수를 이용하여 생성해야합니다. spread연산자( = ... 연산자) 는 구조가 deep할수록 코드가 조금 복잡해집니다. 따라서, immer라는 라이브러리를 사용하여 구현하면 보다 쉽게 가독성이 높은 코드로 구현할 수 ..
| Context API 란 ? ContextAPI는** "징검다리"** 같은 역할을 해줍니다. 특정 함수를 특정 컴포넌트를 거쳐 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발하다보면 자주 발생하는데요, Componet 1개 정도는 큰 불편함이 없지만, 여러개의 컴포넌트를 거쳐 전달하게 된다면 어떻게 될까요? 이럴경우에 Context API를 사용하여 전달하면 매우 편리하게 전역으로 전달할 수 있습니다. | Context API 사용 React.createContext(null); Context를 생성할때는 다음과 같이 React.createContext() 를 사용하여 만듭니다. 파라미터값으로는 Context의 기본값이 되며, Context의 value값을 찾을 수 없을 때 기본값이 사용됩니다. 기..
| useReducer 이해하기 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었습니다. 하지만 이 방법 말고도 더 다른 유용한 방법이 존재하는데 바로 useReducer 를 이용하여 상태를 관리하는것입니다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있고, 다른 파일에 작성 후 불러와서 사용할 수 있습니다. reducer 는 현재 상태와 액션객체를 파라미터로 받아아서 새로운 상태를 반환해주는 함수입니다. function reducer(state,action){ //새로운 상태를 만드는 로직 return nextState; } reducer에서 반환하는 상태는 곧 컴포넌트가..
useMemo를 사용한 연산한 값 재사용 하기. 이번에는 성능 최적화를 위해 연산된 값을 useMoeo 라는 Hook 을 사용하여 재사용 하는 방법을 알아보겠습니다. 어떠한 상태에 변화가 있을때만 연산해야하는 계산 값들은 따로 설정해주지 않으면 컴포넌트가 리렌더링 될 때마다 계속 같이 실행됩니다. 이런 상황에서는 useMemo 라는 Hook 함수를 사용하면 성능을 최적화 할 수 있습니다. Memo 는 "memoized" 를 의미합니다. 이전에 계사 한 값을 재사용한다는 의미를 갖고 있습니다. useMemo() 사용 첫 번째 파라미터 : 어떻게 연산을 할지 정의하는 함수 두 번째 파라미터 : deps 배열을 넣어준다. (단, 이 배열 안에 넣은 내용이 바뀌면, 등록한 함수를 호출해서 값을 연산해주고 내용이..
| useCallback()을 사용한 함수 재사용 useCallback() 은 useMemo 와 비슷한 Hook 입니다. useMemo : 특정 결과값을 재사용 useCallback: 특정 함수를 새로 만들지 않고 재사용 | useCallback()을 사용하는 이유 ? 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다. 함수를 선언하는 것 만으로는 리소스 낭비가 많지는 않지만, 이런 함수가 많아지면 아무래도 부담이되는 건 사실입니다. 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는 것 조차 하지 않고 최적화를 진행합니다. 따라서 되도록 최적화를 위해 낭비를 줄여야하는 건 사실이라고 생각합니다. | useCallback() 사용 사용시 주희할 점, 인에서 사용하..
| useEffect 를 활용하여 mount/unmount/update 작업 해보기 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트,언마운트,업데이트 될 경우를 살펴보겠습니다. 마운트란? mount : 컴포넌트가 처음 나타났을 때 unmount : 컴포넌트가 사라질 때 update : 특정 props가 바뀔 때 마운트/ 언마운트 function User({ user, onRemove, onToggle }) { useEffect(() => { console.log(" Mount ! 컴포넌트가 화면에 나타남"); return () => { console.log(" unMount ! 컴포넌트가 화면에서 사라짐"); } }); | useEffect() 사용하기 첫 번째 파라미터 : 함수 두 번째 ..
useRef로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM을 선택할 때 ref 를 사용해야 합니다. 함수형 컴포넌트에서는 이를 설정 할 때 useRef() 를 사용하여 설정합니다. useRef Hook은 DOM을 선택하는 용도 외에도, 다른 용도가 한가지 더 있습니다. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 입니다. useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않습니다. 일반 컴포넌트의 상태변수와 차이점은 ? 리액트 컴포넌트에서 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링이된 후 업데이트한 값을 조회할 수 있습니다. 하지만, useRef 로 관리한 변수는 바로 조회할 수 있습니다. 다음 값을 관리할 수 있습니다. setTimeo..
리액트에서 훅을 사용하면 엄청 편리하다. 대표적인 몇개의 훅을 살펴보자. useEffect() - componentDidmount역할을 한다. 또한 componentDidUpdate의 역할도 한다. - 2개의 인자를 받는데, 첫 번째는 function으로써의 effect이다. 두 번째는 deps가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변경하도록 활성화 된다. 위와 같은 코드에서 useEffect의 첫 번째 인자로는 함수가, 두 번째 인자로는 Array형태의 변경할 값을 적어주었다. 두 번째 값이 변경될 때 마다 첫 번째의 함수가 계속 실행이된다. 버튼을 클릭할 때 마다 console창에는 "hello"라는 것이 찍히게 된다. 즉, 버튼을 누를 때 number값이 변경되므로, sa..