오늘 공부한 내용 💻
-
컴포넌트 스타일링
-
useMemo
-
React.memo
-
useCallback
-
Custom Hook
-
Storybook
컴포넌트 스타일링
-
Style Sheet
CSS나 SCSS등의 별도의 파일을 사용 -
Inline style
컴포넌트 내의 태그 속성에 스타일을 지정(style 속성) -
CSS in JS
외부 라이브러리를 사용
ex) emotion, styled-component
useMemo
useMemo는 컴포넌트 렌더링 최적화를 위해 필요한 리액트 Hook이다.
그렇다면 먼저 왜 최적화를 해야 하는지 부터 알아보자 😋
우리는 컴포넌트를 함수로 구현하게 된다.
여기서 함수형 컴포넌트는 그냥 JSX를 리턴하는 함수이다.
컴포넌트가 렌더링 된다는 것은 누군가가 함수를 호출하여 실행된다는 것을 의미하고, 따라서 실행 될 때마다 내부의 표현식(함수, 변수) 등이 매번 다시 선언되어 사용된다.
함수 컴포넌트는
1. 자신의 상태가 변경될 때
2. 부모 컴포넌트로 부터 받는 prop이 변경될 때
3. 부모의 상태가 변경될 때
위와 같은 상황에서 리렌더링 된다.
useMemo는 위와 같은 리렌더링 과정에서의 불필요한 코드 실행을 막기 위해 사용되는 Hook이다.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);a, b의 값이 변경되는 경우 computeExpensiveValue의 결과를 memoizedValue에 저장하는 코드이다.
React.memo
위에서 언급한 바와 같이 부모 컴포넌트의 상태가 변경되면 자식 컴포넌트에서 리렌더링이 발생한다.
이런 경우의 리렌더링 자체를 막기 위해 React.memo를 사용한다.
사용법은 JSX를 리턴하는 함수를 React.memo의 괄호로 감싸기만 하면 된다 !
어려웠던 내용 🤢
useCallback
일련의 이유로 컴포넌트가 리렌더링 되면 함수도 다시 선언된다. 같은 함수라도 다시 선언될 경우 다른 함수로 인식하기 때문에 함수를 자식 컴포넌트의 prop으로 보내는 경우와 같은 상황에서는 React.memo만으로 리렌더링을 막을 수 없다.
따라서 useCallback을 사용하여 함수가 다시 정의되는 것을 막아준다 !
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);렌더링시 재정의를 막을 함수와 의존성 배열을 매개변수로 입력한다.
더 공부할 내용 📃
-
CSS in JS-Emotion
-
Storybook
느낀점 👀
오늘 배운 훅들이 거기서 거기 같다고 느껴져서 강의를 몇 번 돌려보고 참고 자료를 찾아보는데 시간을 많이 써버렸다.
각각의 훅들이 필요한 이유와 사용법에 대해서는 꽤나 이해를 하게 되었지만 내가 직접 프로젝트를 진행할 때 최적화를 위해서 사용할 수 있을까 의문이 든다 ,,,
미래의 내가 잘 하겠지 뭐 ,,, ^^해내야지 어쩔거야 ,,,
