#5 Today I Learned - 21.01.10

---

Today I Learned 📝

• classnames
• react : custom hooks 기본 사용법

---

classnames

조건에 따라 class를 추가 / 삭제 할 수 있는 react package이다.

사용법은 간단하다.

import cn from "classnames";

const [sidebar, setSidebar] = useState(false);

<Container className={cn("sidebar", {open: sidebar})}>
    
</Container>

Container의 기본 class는 "sidebar"이며 sidebar가 true일 경우 key의 대한 value값이 true이기에 key 값인 "open"을 toggleClass로 달아줄 수 있다.

cn("foo", "bar"); // "foo bar"
cn("foo", {bar : true}); // "foo bar"
cn({"foo-bar" : true}); // "foo-bar"
cn({"foo-bar" : false});
cn({foo : true}, {bar : true}); // "foo bar" 
cn({foo : true, bar : true}); // "foo bar"

• classnames는 다양한 방법으로 표현할 수 있다.
• 문자열일 경우 true로 인식해 기본으로 보여지며, object는 key에 대한 value가 true일 경우 key값을 class로 return한다.

let buttonType = "primary";
classNames({ [`btn-${buttonType}`] : true });

• 또한 동적으로 class를 주입할 수도 있다.

 const btnClass = cn(‘btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

• 객체, 배열 및 인수를 함께 혼합할 수 있다.

react : custom hooks 기본 사용법

component 로직을 재사용 가능한 hook으로 만드는 것

const [id, onChangeId] = useInput('');

/hooks/useInput.js

import { useState, useCallback } from 'react';

export default (initValue = null) => {
  const [value, setValue] = useState(initValue);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler];
};

• 원래 useState하면 value값과 setValue값을 배열로 리턴하는데 custom hook에서는 useCallback을 포함한 채로 value와 handler로 처리된 값이 반환된다.

🔗 Collection of React Custom Hooks
https://nikgraf.github.io/react-hooks/
https://github.com/rehooks/awesome-react-hooks