React Hooks-01

twitter 클론 코딩을 하면서 hooks에 대해 더 공부해야할 필요성을 느껴 따로 찾아보게 되었다..!
직접 hooks를 만들면서 공부해보자 ! !

set up

• vsc를 이용하지 않고 CodeSandBox 를 이용할 것. -> CodeSandBox는 SandBox를 만들 수 있는 좋은 웹사이트. Vsc나 server등 모든 것이 준비된 환경을 갖춤.

• templates에서 React 선택.

Intro

• hooks가 생기기 전까지는 state을 함수형 component에 사용할 수 없었음.
• react hooks를 이용하면 functional component에서 state를 가질 수 있게 해줌. -> functional programming 스타일이 된다는 것을 의미. 그렇다면 this와 같은 규칙이나 render에 크게 신경쓰지 않아도 됨!!!
• hooks은 recompose 라이브러리에서 시작됨.
• hooks는 react의 state machine에 연결하는 기본적인 방법.
• useState 은 array를 리턴함. 이 array의 요소는 value와 value를 변경하는 함수. -> 즉 useState이 리액트 state의 매니지먼트 밑으로 들어가서 훅을 당기는 것. 따라서 class component에서 일일히 설정하지 않아도 됨.

example code

const App=()=>{
  const [count, setCount]=useState(0);
  return(
    <>
    {count}
    <button onClick={()=>setCount(count+1)}>
      Increasement
    </button>
    </>
  )
}

export default App;

• useEffect 는 component did mount, did update과 비슷함. 이는 주로 API에서 데이터를 요구할 때 사용.

useInput

기본적으로 input을 업데이트하는 useInput hook를 만들어보자 !

useInput

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("hi ", maxLen);
  return (
    <div className="App">
      <h1> Hello </h1>
      <input placeholder="Name" {...name} />
    </div>
  );
};

• useInput은 initialValue를 받음.
• validation fuction은 최대길이를 검사하는 함수.
• name을 이용해서 useInput에 hi와 maxLen을 넣어줄 것. 매번 validator는 바뀜. 그리고 validator 타입이 function이라면 willUpdate에 validator의 결과를 업로드 할 것.
• 이 케이스에서 validator는 maxLen이고 이 결과 true나 false가 될 것.
• value의 길이가 10보다 작으면 maxLen은 true->willUpdate이 true면 이를 화면에 업데이트

• 10글자 미만만 화면에 출력.

마무리

다음 시간에는 useTabs를 비롯한 여러가지 hooks를 몇가지 더 만들어보겠습니다!