[ React Hook ] 3. useTabs

 

# useTabs의 기능

 

import {useState} from "react";

export const useTabs = (initialTab, allTabs) => {
    if (!allTabs || !Array.isArray(allTabs)) {
        return;
    }

    const [currentIndex, setCurrentIndex] = useState(initialTab);
    return {
        currentItem: allTabs[currentIndex],
        changeItem: setCurrentIndex
    };
}

 

useTabs는 배열이나 객체의 값을 useState의 별도사용 없이 re-render시켜주는 hook이다.

 

사용법 :  useTabs를 새로운 변수에 할당하고 컴포넌트에 넣어서 사용한다.

 

 

# 예시

 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 {currentItem, changeItem} = useTabs(1, content);
 <div className="App">
      {content.map((section, index) => (
        <button onClick={ ()=> changeItem(index) }>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
 </div>

위와 같이 예시로 content 라는 배열내에 객체 리터럴을 반환하는 변수가 있다.

 

그리고 구조분해할당을 사용하여 useTabs에서 반환값인 currentItem 와 changeItem를 가져와서

 

컴포넌트 내부에 넣어서 사용할 수 있다.

 

 

# 설명

import {useState} from "react";

export const useTabs = (initialTab, allTabs) => {
    if (!allTabs || !Array.isArray(allTabs)) {
        return;
    }

    const [currentIndex, setCurrentIndex] = useState(initialTab);
    return {
        currentItem: allTabs[currentIndex],
        changeItem: setCurrentIndex
    };
}

      /*     아래부터는 적용예시이다.     */
      
 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 {currentItem, changeItem} = useTabs(1, content);
 <div className="App">
      {content.map((section, index) => (
        <button onClick={ ()=> changeItem(index) }>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
 </div>

useTabs의 구조와 예시는 이러하고

 

 

const useTabs = (initialTab, allTabs)

첫번째 전달인자(argument)는 초기에 default 로 render될 리터럴을 넣는다.

 

지금 예시는 배열형태이기 때문에 숫자를 넣어주면 된다. (예시를 기준으로 [ 0, 1 ] 이있다.)

 

그리고 두번째 전달인자는 정보를 가져올 배열의 변수를 넣어준다. ( content )

 

 

    if (!allTabs || !Array.isArray(allTabs)) {
        return;
    }

if문으로 allTabs가 false이거나 Array가 아닌경우에는 실행되지 않도록 브레이크를 걸어준다.

 

 

const [currentIndex, setCurrentIndex] = useState(initialTab);

이 후에 useState를 이용하여 useTabs에서 받아온 첫번째 전달인자인 initialTab을 default로 두고

 

re-render될 수 있는 상태가 되도록 만든다.

 

 

    return {
        currentItem: allTabs[currentIndex],
        changeItem: setCurrentIndex
    };

그리고 useTabs의 반환값은 위와 같다.

 

 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"
    }
 ]

정보를 가져올 배열 content이다.

 

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

useTabs에서 반환값인 currentItem과  changeItem을 꺼낸다 ( 구조분해할당 )

 

currentItem = 배열전체 [  렌더링함수로인해서 바뀐 렌더링 벨류  ]
changeItem = 렌더링함수()

 

이렇게 이해를 하고 있어야  더 쉽다.

 

# 컴포넌트 적용예시

      {content.map((section, index) => (
        <button onClick={ ()=> changeItem(index) }>{section.tab}</button>
      ))}

# .map

배열 content에서 .map 을 사용해서 모든 배열에 각각 함수를 만들어서 반환하게 만들어준다.(forEach와 같은구조)

 

section이라는 첫번째 매게변수를 만들고( content로 접근할 수 있는 매게변수 )

 

두번째 매게변수는 index로 .map에서 기본으로 제공하는 기능으로

 

배열의 순서대로 { index : 순서 } 의 속성이 들어간다. content는 0, 1이 있으니

 

0번째 배열에는 { index: 0 }, 1번째 배열에는 { index: 1 } 이라는 속성이 만들어지고

 

{ index: 0 }을가진 버튼 하나와 { index: 1 }을 가진 버튼, 총 2개의 버튼을 만든다.

 

# - button onClick -

버튼에 온클릭 이벤트를 만들어주고 내용은 changeItem(index) 이다.

 

 changeItem = 렌더링함수() 이기때문에  setCurrentIndex( index ) 가 된다.

 

그렇게 되면 currentIndex는 전달받은 index로 re-render되고

 

currentItem : allTabs[ currentIndex ] 이므로 

 

currentItem은 클릭했을때 해당 index에 일치하는 배열순서의 객체리터럴(값)을 가져온다.

( 배열전체 [  렌더링함수로인해서 바뀐 렌더링 벨류  ] )

 

 

# 컴포넌트 내용

 	content.map((section, index) => { ... } )

내용은  {section.tab}  이다.

 

section은 단순하게 함수가 적용된 해당요소에 접근하기 위한 매게변수이기때문에

 

{section.tab} = {conent.tab}  과 같다. 즉 버튼의 내용은 각 index에 맞게 tab(key)의 value로 나타난다.

(Section 1)   (Section 2)      < == 이런 버튼이 나온다.

 

<div>{currentItem.content}</div>

위에서 말했던

 

------------------------------------------------------------------------------------------------

 

currentItem : allTabs[ currentIndex ] 이므로 

 

currentItem은 클릭했을때 해당 index에 일치하는 배열순서의 객체리터럴(값)을 가져온다.

( 배열전체 [  렌더링함수로인해서 바뀐 렌더링 벨류  ] )

 

 -----------------------------------------------------------------------------------------------

이 부분이고

 

{클릭한 녀석의 객체리터럴}.content 이므로 

 

위에 버튼 (Section 1) 을 클릭하면

I'm the content of the Section 1

 

위에 버튼 (Section 2) 을 클릭하면

I'm the content of the Section 2

 

이렇게 내용을 보여준다.