React Hooks 01) useState, useInput, useTab

React Hook

 

리액트 hooks 에 관한 노마드 코더의 무료 영상을 보고 쓴 리액트 훅에 관한 공부 글이다.

실전형 리액트 Hooks 10개

일단 hook이란 react의 state machine에 연결하는 가장 기본적인 방법이다.

이번 글에서는 useState, useInput, useTab에 관해 설명한다.

 

useState

 

useState는 가장 기본적인 리액트 훅이다.

  const [state, setState] = useState(0);

가장 기본적인 useState 함수 구문이다. useState는 항상 2개의 값을 return한다.

첫번쨰 변수는 우리가 이용하는 값이고, 두번째 변수는 첫번째 변수를 바꿀수 있게해주는 함수이다. 그리고 useState의 괄호 안에 초기값을 부여 할 수 있다. useState의 초깃값은 어떤 것이든 사용 가능하다.

  const state = useState(0)[0];
  const setState = useState(0)[1];

useState는 이런 방식으로도 호출 가능하다. useState()[0]은 useState기능의 첫번째 값이 되는 것이고, useState()[1]은 두번째 값인 변환 함수가 된다.

useState를 함수 내에서 사용하면 그 안에서 값을 리턴할수 있다.

const UseState = () => {
  const [state, setState] = useState(0);
  return (
    <div>
      <h1>{state}</h1>
    </div>
  );
};

위와 같이 프로그램을 짜면 h1태그안에 0이라는 숫자가 출력된다.

useState의 좋은점은 손 쉽게 요소의 값을 변환할 수 있다는 점이다.

const UseState = () => {
  const [state, setState] = useState(0);
  const incrementState = () => setState(state + 1);
  const decrementState = () => setState(state - 1);
  return (
    <div>
      <h1>{state}</h1>
      <button onClick={incrementState}>Increment</button>
      <button onClick={decrementState}>Decrement</button>
    </div>
  );
};

이렇게 코드를 짜면 화면에는 0이란 숫자와 함께 두 버튼이 출력 될것이다. Increment 버튼을 클릭하면 state의 값이 더해지고, Decrement 버튼을 클릭하면 state의 값이 줄어든다.

 

useInput

 

useState에 대해 살펴보았으니 이제 Input을 활용한 hook을 만들어보자.

useInput이라는 함수를 만들고 그 안에 useState를 사용해보자.

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
};

함수가 initalValue 값을 받아와 state의 기본 값으로 쓰게 한 뒤 컴포넌트에 input 태그를 아래와 같이 넣자.

const UseInput = () => {
  const name = useInput('Me');
  return (
    <div>
      <input type="text" placeholder="name" />
    </div>
  );
};

useInput 함수를 호출해서 초기 값을 넣어줬다. 컴포넌트에서 useInput 함수 안을 접근하기 위해 return 값을 넣어서 value를 오브젝트로 받아오자.

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  return { value };
};

이제 UseInput 컴포넌트에서 state에 name.value로 접근가능하다. Input의 value 값에 name.value를 넣어 확인해보자.

      <input type="text" placeholder="name" value={name.value} />

화면에 출력된 input안에 Me가 나타날 것이다.

또는 {...name}이라고 적을 수도 있다.

      <input type="text" placeholder="name" {...name} />

이렇게 적으면 자동으로 name 변수 안에 있는 값들을 모두 풀어준다.

input의 value를 바꾸기 위해 onChange 함수를 만들어주자.

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
    console.log(e.target);
  };
  return { value, onChange };
};

아까 {...name}으로 name 값이 리턴하는 모든 오브젝트를 풀어줬으므로 따로 함수 지정을 하지 않아도 된다. 즉슨 이 방식으로 값 지정을 하면 다른 컴포넌트, 함수 파일에서 해당 요소를 조정 할 수 있다는 의미이다.

이제 input칸에 키를 입력하면 콘솔에 아래 처럼 출력이 될 것이다.

<input type="text" placeholder="name" value="Me" />

콘솔에 출력은 되지만 아직 value 값을 바꾸는 함수를 사용하지 않았기 때문에 아무것도 입력 할 수 없는 상태이다.

그럼 이제 onChange함수에 value를 바꾸고 확인 할 수 있는 기능을 구현해보자.

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => {
    setValue(e.target.value);
  };
  return { value, onChange };
};

const UseInput = () => {
  const name = useInput('Me');
  return (
    <div>
      <input type="text" placeholder="name" {...name} />
      <p>{name.value}</p>
    </div>
  );
};

e.target.value로 state의 value 값을 설정해 주기만 하면 이제 input값을 바꿀 수 있고, input 값이 바뀌는 즉시 p태그안에 input에 입력한 값이 나타날 것이다.

 

useTab

 

이번에는 탭을 사용하는 hook를 만들어보자.

우선 content 배열을 만들고 오브젝트를 몇개 만들어주자.

const content = [
  {
    tab: 'Section1',
    context: 'This is Section1',
  },
  {
    tab: 'Section2',
    context: 'This is Section2',
  },
  {
    tab: 'Section3',
    context: 'This is Section3',
  },
];

그리고 컴포넌트안에 탭을 선택할 버튼을 map 함수로 만들어주자.

const UseTab = () => {
  return (
    <div>
      {content.map((section) => (
        <button key={section.tab}>{section.tab}</button>
      ))}
    </div>
  );
};

이제 useTab 함수를 만들어보자

const useTab = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentTab: allTabs[currentIndex],
  };
};

const UseTab = () => {
  const { currentTab } = useTab(0, content);
  return (
    <div>
      {content.map((section) => (
        <button key={section.tab}>{section.tab}</button>
      ))}
      {currentTab.context}
    </div>
  );
};

일단 currentIndex의 기본 값을 0으로 설정해 주었고 useTab에서 currentIndex 의 index에 해당하는 content 객체를 리턴하게끔 설정해서 currentTab이라는 객체에 담아주었다.

이제 onClick 이벤트로 클릭하면 바뀌는 기능을 더해보자.

const useTab = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentTab: allTabs[currentIndex],
    changeTab: setCurrentIndex,
  };
};

const UseTab = () => {
  const { currentTab, changeTab } = useTab(0, content);
  return (
    <div>
      {content.map((section, index) => (
        <button onClick={() => changeTab(index)} key={section.tab}>
          {section.tab}
        </button>
      ))}
      {currentTab.context}
    </div>
  );
};

useTab이 changeTab이라는 변수를 리턴하면서 setCurrentIndex 값을 가지게 하자. 그리고 currentTab과 함께 changeTab 객체를 같이 벙의 해주자.

그후 content.map에 index도 넣어줘서 onClick시 changeTab 함수에 index 값이 들어가게 해주자. 여기까지 하면 버튼 클릭시에 컨텐츠가 바뀌는 걸 볼수 있다.

다음 글에서는 useEffect에 대한 소개와 useEffect를 이용한 useTitle, useClick에대해 포스팅을 하겠다.