React 간단한 tab 만들어보기 (hook 활용)

React hook을 활용하여 탭 기능을 만들어보도록 하겠습니다.

실습은 codesandbox를 활용했습니다.

 

app.js

import React, { useState } from "react";
import "./styles.css";

const content = [
  {
    tab: "react",
    content:
      "컴퓨팅에서 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다."
  },
  {
    tab: "Node.js",
    content:
      "Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다"
  },
  {
    tab: "javascript",
    content:
      "자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다."
  }
];


export default function App() {

  return (
    <div className="App">
      {content.map((section) => (
        <button>{section.tab}</button>
      ))}
      <br />
      <br />
    </div>
  );
}

 

렌더링된 화면

우선 content 배열 오브젝트를 미리 생성하고, 3개의 탭 버튼을 화면에 렌더링 했습니다.

이제 여기서 필요한 건 우리는 react, Node.js, javascript 버튼을 클릭 했을 시 그에 해당하는 content내용을 보내주면 됩니다.

 

먼저 useTabs 라는 함수를 먼저 만들어주도록 하겠습니다.

const useTabs = (initialTabs, allTabs) => {
  
}

위와 같이 만들었다면 hook을 활용하여 state 를 사용하도록 하겠습니다.

const useTabs = (initialTabs, allTabs) => {
  const [contentIndex, setContentIndex] = useState(initialTabs);
};

useState를 사용하여 initialTabs 파라미터로 받은 값을 contentIndex state에 초기화 시켜 줍니다. 만일 0이면 0번째 배열인 react tab의 content 를 가져올 수 있습니다. 이제 저희가 필요한건 allTabs 파라미터로 넘어온 content를 해당 index에 맞는 배열을 반환해주면 됩니다. 

const useTabs = (initialTabs, allTabs) => {
  const [contentIndex, setContentIndex] = useState(initialTabs);
  return {
    contentItem: allTabs[contentIndex],
    contentChange: setContentIndex
  };
};

만일 initialTabs 인자값으로 0이 들어왔다면 useState(0) 으로 contentIndex = 0 으로 초기화가 되고 contentItem 에는 0번째의 content 배열 값이 반환됩니다.

여기까지 작성하셨다면 화면에 렌더링을 해보도록 하겠습니다.

export default function App() {
  const { contentItem } = useTabs(0, content);
  return (
    <div className="App">
      {content.map((section) => (
        <button>{section.tab}</button>
      ))}
      <br />
      <br />
      {contentItem.content}
    </div>
  );
}

useTabs의 아규먼트로 초기 값 0과, content 배열을 넘겨주었습니다. 그리고 넘겨받은 파라미터 값으로 useTabs 함수에서는 contentItem에 0번째의 배열을 반환합니다. 

만일 useTabs(1,content) 를 하셨다면 아규먼트로 1을 줬기 때문에 content의 index 1번째인 Node.js가 출력됩니다.

이제 각각에 해당하는 버튼클릭시 그에 해당하는 content내용을 보여주기 위해 button에 onClick 이벤트를 사용하여 contentIndex 값을 바꿔주도록 하겠습니다.

export default function App() {
  const { contentItem, contentChange } = useTabs(0, content);
  return (
    <div className="App">
      {content.map((section, index) => (
        <button onClick={() => contentChange(index)}>{section.tab}</button>
      ))}
      <br />
      <br />
      {contentItem.content}
    </div>
  );
}

---

전체적인코드

import React, { useState } from "react";
import "./styles.css";

const content = [
  {
    tab: "react",
    content:
      "컴퓨팅에서 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다."
  },
  {
    tab: "Node.js",
    content:
      "Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다"
  },
  {
    tab: "javascript",
    content:
      "자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다."
  }
];

const useTabs = (initialTabs, allTabs) => {
  const [contentIndex, setContentIndex] = useState(initialTabs);
  return {
    contentItem: allTabs[contentIndex],
    contentChange: setContentIndex
  };
};

export default function App() {
  const { contentItem, contentChange } = useTabs(0, content);
  return (
    <div className="App">
      {content.map((section, index) => (
        <button onClick={() => contentChange(index)}>{section.tab}</button>
      ))}
      <br />
      <br />
      {contentItem.content}
    </div>
  );
}