React Hooks [useState] 리액트 훅

React Hook 

: state machine에 연결하는 방법

functional component에서 state를 가질 수 있게 해줌

=> class component, did mount, render ... 등을 안해도 됨

=> 함수형 프로그래밍

+) 관련 영상 참조

 

총 2가지의 useState hooks에 대해 정리

1. useState

useState 항상 2개의 value를 return 한다.

초기에 state를 initialState를 세팅할 수 있는 옵션을 제공한다.

const [item, getitem] = useState(1);

 

**hook으로 짠 코드와 class component로 짠 코드 비교**

 

[hook]

const App=()=>{
  const [item,setItem]=useState(1);
  const incrementItem=()=>setItem(item+1);
  const decrementItem=()=>setItem(item-1);
  return(
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
      </div>
  );
}

[class component]

class AppUgly extends React.Component{
  state={
    item: 1
  }
  render(){
      const{item}=this.state;
      return(
        <div className="App">
          <h1>Hello {item}</h1>
          <h2>Start editing to see some magic happen!</h2>
          <button onClick={this.incrementItem}>Increment</button>
          <button onClick={this.decrementItem}>Decrement</button>
          </div>
      );
    
  }
  incrementItem=()=>{
    this.setState(stae=>{
      return{
        item:state.item+1
      };
    });
  };
  decrementItem=()=>{
    this.setState(stae=>{
      return{
        item:state.item-1
      };
    });
  };
}

 

[실행결과]는 같다.

 

 

코드를 비교해보았을때 훅을 사용하는것이 

작성하기도 간편하고 가독성도좋다.

1-1. useInput

USESTATE를 사용하는 첫번째 훅!

useState를 사용하여 첫번째 커스텀 Hooks인 useInput을 만들었다.

useInput은 기본적으로 input을 업데이트 한다.

useInput은 args로 initialValue를 받고, initialValue를 초기값으로 갖는 useState를 작성한다.

const useInput=(initialValue,validator)=>{
  const[value,setValue]=useState(initialValue);
  const onChange=(event)=>{
    const{
      target:{value}
  } =event;
  let willUpdate = true;
  if(typeof validator==="function"){
    willUpdate=validator(value);
  }
  if (willUpdate){
    setValue(value);
  }
};
  return {value, onChange};
};

const App=()=>{
  const maxLen=(value)=>value.length <= 10;
  const name=useInput("Mr.", maxLen);
  return(
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
      </div>
  );
};

 

[실행화면]

useInput에 validator args를 추가하여 validator가 있는지 확인하고 실행된다.

 

 

1-2. useTabs

USESTATE를 사용하는 두번째 훅!

useTabs는 initialTab, allTabs 두개의 매개변수를 갖고, currentItem, changeItem 두 값을 return 하도록 만든다.

const content =[
  {
    tab:"Section 1",
    content :"I'm the content of the Section 1"
  },
  {
    tab:"Section 2",
    content : "I'm the content of the Section 2"
  }
];


const useTabs =(initialTab, allTabs)=>{
  if(!allTabs || !Array.isArray(allTabs)){
    return;
  }
  const [currentIndex, setCurrentIndex]=useState(initialTab);
  return{
    currentItem:allTabs[currentIndex],
    changeItem:setCurrentIndex
  };
};

const App=()=>{
  const {currentItem, changeItem} =useTabs(0,content);
  return(
    <div className="App">
      {content.map((section, index) => (
        <button onClick={()=>changeItem(index)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

initialTab : 초기에 노출할 값

allTabs : 모든 tab의 정보 ⇒ 버튼에 따라 노출되는 내용변화

useInput은 args로 initialValue를 받고, initialValue를 초기값으로 갖는 use State를 작성해준다.

배열객체를 사용하여 button과 내용을 나타나게하고 map()메소드를 사용하여 버튼을 생성한다.

 

[실행화면]

 

이렇게 USESTATE 를 사용하여 커스텀 Hook인 useInput과 useTabs에 대해 알아보았다.