hooks

React! useState와 useEffect를 사용한 아주 아주 간단한 예제!

바로 시계 만들기! 내가 원하는 건 바로 째깍 째깍 자동으로 시간이 리셋되는 시계를 만드는 것이다. js를 사용하면 쉽게 만들 수 있지만 우리는 HOOKS를 사용해 만들어보자! 사용한 hook은 useState와 useEffect를 사용하여 만든 시계입니다! 기존에 설정했던 조건에 맞게 시간이 자동으로 돌아가게 만들었습니다. useState를 사용하여 new Date()함수를 지정했고 useEffect 첫번쨰 인자를 사용하여 setTime에 새로운 시간을 할당해줍니다. 시간은 1초마다 진행되므로 두번째 인자값에 1000ms를 삽입하여 1초마다 new Date()함수가 실행되고 매초 새로운 인자값이 setTime에 할당되므로 uesEffect는 계속 반복됩니다. 더 쉬운 방법이 있을수 있으나 저는 toLo..

React Hooks 5.useMemo

useMemo란? component 성능을 최적화 하기 위해 사용한다! 동일한 값을 리턴하는 함수를 반복적으로 호출한다면 맨처음 값을 계산할때 해당 값을 메모리에 저장해 재사용하는 기법이다. useMemo의 구조! 기본적으로 첫번째인자는 callBack함수를 받으며 return값을 반환해준다! 두번째 인자인 배열은 의존성 배열로 언제 업데이트 할지를 설정할수 있다. 빈배열이라면 맨처음 렌더링 될때 함수가 작동하며 그 때 계산한 값을 사용한다. 위의 사진과 같이 [item] 요소의 값이 업데이트 될때 다시 함수가 작동한다! 계산기로 알아보는 useMemo! 결과화면! 왜일까? 어려운 계산과 쉬운계산 모두 딜레이가 있다. 어려운 계산은 고의로 속도를 지연시키기 위해 큰수를 반복하도록 설정해놓아 딜레이가 생기..

React Hooks 4.useContext

useContext? 기존에는 컴포넌트간 데이터를 전달하려면 props를 사용해서 부모로부터 자식에게 전달해줘야 했습니다! props의 기본형태는 자 그런데 페이지의 수가 많아지고 중간 컴포넌트에서는 데이터가 필요하지 않을수 있습니다. 이런식으로 방대한 양의 리액트가 존재할때 가장 마지막 자식에게 데이터를 전달할때 props를 사용하면 코드도 복잡하고 하나가 바뀌면 모든 컴포넌트를 바꿔줘야한다는 단점이 있습니다. 이점을 해결하기위해 useContext를 사용한다! useContext를 사용하기 위해선? 먼저 createContext 를 사용한 파일로 기본값을 지정해줍니다! createContext에 값을 넣어주는 이유는 만약 provider의 value값이 지정되지 않았을때 받는 값을 지정해주기 위해서 ..