yomae / react-nodebird Goto Github PK

왜 인라인 스타일 코드를 지양해야 하는가?

• 예를 들면 <div style={{marginTop: 10}}> 에서 {} 객체 부분이 리렌더링 시에 다르다고 인지함 ( {} === {} -> false )
• 해당 스타일 코드가 바뀌지 않아도 계속 실행이 되므로 최적화가 되지 않음.
• Styled-Components를 사용하거나, useMemo를 사용하여 캐싱하자.
• useMemo 예 -> const style = useMemo(() => ( {marginTop: 10} ), [] );

useCallback - 함수를 캐싱, useMemo - 값을 캐싱

Custom Hooks

• 특히나 폼 같은 곳에서 반복적으로 많이 사용하는 것들을 편리하게 묶어보자.

export default (initValue = null) => {
  const [value, setValue] = useState(initValue);

  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return [value, handler];
};