오늘은 메모이제이션과 반응형 웹 만들기에 대해서 배웠다.
먼저 메모이제이션은 '메모리에 넣기'라는 의미대로 이전의 값을 메모리에 저장함으로써 동일한 반복 수행을 제거해서 실행 속도를 빠르게 하는 기술이다.
setState 함수를 사용하게 되면 화면 전체가 다시 랜더링 되면서
쓸데없이 여러개의 state와 함수들이 재생성되게 된다.
심지어 위와 같이 작성된 코드에서 부모인 컴퍼넌트가 다시 랜더링 될 때 자식 컴포넌트 또한 불필요하게 재랜더링 되는 모습을 볼 수 있다.
이렇듯 불필요한 과정들을 없애주고 좀 더 빠른 컴포넌트 랜더링을 위해서 메모이제이션을 사용할 수 있다.
React에서 사용할 수 있는 메모이제이션으로 memo, useMemo, useCallback을 배웠는데
memo의 경우 컴포넌트 자체를 메오이제이션 하는 기능이다.
이런식으로 컴포넌트 자체를 메모로 저장(?)한 후 새로 랜더되는 결과가 저장된 결과와 같다면 해당 컴포넌트를 재랜더링 하지 않도록 해준다.
react developer tools로 확인해 보니 재랜더링이 되지 않은 모습이다.
useMemo의 경우에는 변수의 값을 저장하는데 react를 사용해서 개발을 할 경우 state를 사용하기 때문에 많이 사용될 일은 없다고 한다.
복잡한 알고리즘을 사용하게 될 때 사용하는 경우도 있을 수 있지만
프론트에서 중요한 알고리즘을 사용하게 될 경우 소스코드가 유출될 수 있기때문에 그러한 것들은 백엔드에서 작성하는 것이 좋다.
반면 useCallback의 경우 함수를 메모이제이션 하는 기능인데 꽤나 유용하게 사용할 수 있다.
사용법은 useEffect와 비슷하다.
이런 식으로 사용하게 되는데 함수자체만 기억하는 것이 아니고 함수 안에 있는 스테이트까지 기억한다는 것을 유의해야겠다.
다음은 반응형 웹 만들기이다.
반응형 웹을 만들 때 작은 화면을 기준으로 만들고 늘리는 것은 비교적 쉽지만 그 반대는 글자가 깨질 수 있기 때문에 작은 것을 기준으로 만들고 늘리는 방식이 좋다.
반응형은 2단계 혹은 3단계로 만드는 것이 보통이고 4단계정도 까지 만드는 경우도 있는 것 같다.
미디어쿼리를 이용해서 만들어 주면 되는데 내가 생각했던 것보다 훨씬 시간을 잡아먹는 작업이었다.
반응형으로 웹을 만들 때에는 시간이 오래걸린다는 것을 잘 생각하고 계산해서 만들어야 할 것 같다.
무조건 반응형으로 웹을 만들어야 하는 것은 아니지만 요즘 트렌드는 반응형이라고 한다.
