[React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경) Kassid

// 클릭한 탭 인덱스
const [tabIdx, setTabIdx] = useState(0)

// 클릭 이벤트 함수
const tabClick = (idx)=>{
  if(tabIdx !== idx){
    tabBtnRef.current[tabIdx].classList.remove("selected");
    tabBtnRef.current[idx].classList += " selected";
    setTabIdx(idx);
  }
}

3) state 변화에 따른 UI 변경

컴포넌트를 생성하여 아래와 같이 위치시킨다.

RenderTab이라는 이름으로 제작하였고

idx라는 props에 위에서 제작한 tabIdx state를 전달해준다.

function App(){
  ...
  
  return(
	...
    {
      <RenderTab idx={tabIdx} />
    }
  )
}

- 제어문을 활용하는 방법

const RenderTab = (props)=>{
  switch (props.idx) {
    case 0:
      return <Tab1/>;
      break;
    case 1:
      return(<Tab2/>)
      break;
    case 2:
      return(<Tab3/>)
      break;
    
    default:
      return(<Tab1/>)
      break;
  }    
}

- if 문 없이 전달하는 방법

if문 없이 간결하게 작성하고 싶은 경우

아래처럼 숫자인 props와 Array 자료형을 활용하면 된다.

function RenderTab(props){
  return [ <Tab1/>,  <Tab2/>,  <Tab3/> ][props.idx]
}

- props.~~ 없이 더 간결하게 작성하는 방법

props.~~ 를 더욱 함축하기위해서는

아래처럼 {props명}을 이용하면 된다.

function RenderTab({idx}){
  return [ <Tab1/>,  <Tab2/>,  <Tab3/> ][idx]
}

저작자표시

'🌌 | WEB DEV > React' 카테고리의 다른 글

[React] 16. 컴포넌트 전환효과 부여해주기 (0)	2024.01.13
[React] 14. React와 서버 연동하기 (ajax를 이용해! (get, post) ) (2)	2024.01.12
[React/JS] setTimeout, setInterval 은 전혀 "시계" 하지 않아 (setTimeout, setInterval 오류) (1)	2024.01.06
[React] 13. 리액트 컴포넌트의 Lifecycle와 useEffect (1)	2024.01.02
[React] 13. 리액트 컴포넌트의 Lifecycle과 useEffect (0)	2024.01.02

[React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경)

1. 동적인 UI 제작을 위한 3step

2. 제작 방법

1) html, css로 UI 제작

2) state 생성

3) state 변화에 따른 UI 변경

- 제어문을 활용하는 방법

- if 문 없이 전달하는 방법

- props.~~ 없이 더 간결하게 작성하는 방법

'🌌 | WEB DEV > React' 카테고리의 다른 글

댓글

티스토리툴바

[React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경)

1. 동적인 UI 제작을 위한 3step

2. 제작 방법

1) html, css로 UI 제작

2) state 생성

3) state 변화에 따른 UI 변경

- 제어문을 활용하는 방법

- if 문 없이 전달하는 방법

- props.~~ 없이 더 간결하게 작성하는 방법

'🌌 | WEB DEV > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바