Memoization ? ( 메모이제이션 )
- 정의
기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다.
Memoization을 잘 활용하면 중복연산을 피할 수 있기때문에 성능을 더 높일 수 있습니다.
피보나치 수열 ( Memoization 테스트 )
위와같이 코드를 짜도 피보나치 수열을 return해줄수 있다. 하지만 n이 커질수록 게산해야 할 값이 훨씬 많이지기에 값을 얻어오는데 상당한 시간이 소요되는것을 확인할 수 있습니다.
이번엔 위와같이 memo를 사용하여 기존 결과값을 memo에 저장해놓고 동일한 결과값이 있을 경우에는 그 값을 그대로 사용하였다.
이처럼 코드를 짜니 값을 얻어오는데 필요한 시간이 훨씬 단축된것을 확인할 수 있습니다.
useCallback
- 정의
특정함수를 새로 만들지 않고 재사용하기 위해 사용합니다.
useCanllback을 사용하여 쓸데없는 리렌더링을 줄여 성능 최적화를 할 수 있습니다.
- 문법
useCallback( CallBack 함수 , useState 배열 )
useCallback 사용 예시
위와같이 코드를 짜게되면 컴포넌트가 리렌더링 될때마다 함수를 새로 만들게 됩니다.
위와같이 useCallback을 사용하면 해당 컴포넌트가 리렌더링 되어도 그 함수가 의존하는 값이 변하지 않는 이상은 기존 함수를 계속하여 반환합니다.
useMemo
- 정의
특정값을 저장해두고 재사용하기 위해 사용합니다.
useMemo 사용하여 쓸데없는 리렌더링을 줄여 성능 최적화를 할 수 있습니다.
- 문법
const A = useMemo( 콜백 함수 , useState 배열 )
useContext
- 정의
데이터가 필요할 때마다 props를 통해 일일이 전달할 필요가 없이 context를 이용해 데이터를 공유 할 수 있습니다.
- 문법
const Test = createContext() : context 객체를 생성합니다.
Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 합니다.
useContext(Test) : Provider로 전달받은 context를 가져옵니다.
useContext 사용 예시
createContext()를 사용하여 context 객체를 생성하고 Context 컴포넌트에서 생성한 상태값 name과 상태를 바꿔줄 setName을 obj에 담아 Provider를 사용하여 하위 컴포넌트에게 전달해줍니다.
A 컴포넌트의 자식인 B 컴포넌트에서 useContext를 사용하여 provider로 전달받은 name과 setName를 가져욉니다.
이렇게하여 props를 사용하여 Context 컴포넌트 -> A 컴포넌트 -> B 컴포넌트로 일일이 전달하지 않고 바로 B 컴포넌트에서 전달받은 데이터를 사용할 수 있습니다.
useReducer
- 정의
useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook입니다.
하지만 useState와 다른점은 컴포넌트 외부에서 상태를 업데이트 하는 로직을 작성할 수 있게 함으로써 코드를 최적화 할 수 있습니다.
이렇게 상태를 업데이터 하는 로직을 컴포넌트 외부에서 작성할 수 있게되면 다른 파일에 작성하여 불러와서 사용할 수도 있게됩니다.
useReducer vs useState ( 참고 자료 )
- 문법
const [ state , dispatch ] = useReducer( reducer , initialState )
useReducer : 첫번째 인자인 reducer 함수가 반환하는 값으로 state를 갱신하는 역할을 합니다.
dispatch : dispatch 함수는 reducer 함수를 실행시키고 인자값은 reducer함수에 두번째 인자값인 action에 들어갑니다.
initialState : 초기값입니다.
reducer : dispatch 함수에 의해 실행되고, 인자값으로 현재의 state와 action을 인자값으로 받게 되는데 action으로 기존의 state를 대체할 새 state를 return합니다.
useReducer 사용 예시
handleclick 또는 addList 함수들이 실행되면 dispatch를 통하여 Reduce 컴포넌트 외부에 있는 reducer 함수를 실행합니다.
이때 dispatch의 인자값은 reducer 함수에 action으로 할당되어 reducer 함수에서 현재의 state와 action으로 새로운 state를 return해줍니다.
결과
기존 초기값에서 이름바꾸기 버튼을 Click하면 username이 추가되고 아이디 바꾸기버튼을 Click하면 userid가 추가되고 리스트 추가 버튼을 누르면 notice에 List가 추가됩니다.
