[리액트] 탭 UI 생성 (state 활용) / props 축약 / if 문 생략

탭 UI 생성

1. html css로 디자인 미리 완성해놓고
2. UI의 현재 상태를 저장할 state 하나 만들고 (버튼)
3. state에 따라서 UI가 어떻게 보일지 작성 (환경)

---

1. html css로 탭 디자인 미리 완성

Detail.js 에서 >>

<Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>
      <Nav.Link eventKey="link0">버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link1">버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link2">버튼2</Nav.Link>
    </Nav.Item>
</Nav>

react-bootstrap 사이트에서 복사해서 Detail 페이지 넣기.

import { Nav } from "react-bootstrap";

갖다 쓰려면 import 필수.

 

버튼마다 event key를 잘쓰라고 돼있음 

작명을 각각 다른이름으로 함.

 

defaultActiveKey (옵션으로 사용 가능)

= 기본으로 눌려있을 버튼

이벤트 키 중에 아무거나 집어넣기 

= link0 으로 버튼0 지정

---

2. UI의 현재 상태를 저장할 state 하나 만들기

function Detail(props) {
  let { id } = useParams(0);
  let [alert, setAlert] = useState(true);
  // 탭 UI state
  let [탭, 탭변경] = useState(0);

상단에

  let [탭, 탭변경] = useState(0);

 state 하나 생성

 

탭 UI의 상태는

0번 내용이 보이거나 / 1번 내용이 보이거나 / 2번 내용이 보이거나 

셋 중 하나.

 

0 = 0번째 상품(내용) 보이는 상태 

---

3. state에 따라서 UI가 어떻게 보일지 작성
컴포넌트로 생성
(삼항 연산자 써도 가능)
- 조건문으로 사용

조건 >>
탭이 0이면?
내용 보여주세요
아니면 null

 

삼항연산자 쓴 경우 >>

 {탭 == 0 ? <div>내용0</div> : null}

조건문 완성

{탭 == 0 ? <div>내용0</div> : null
탭 == 1 ? <div>내용1</div> : null}

삼항연산자는 중괄호 1개에 이렇게 연달아 사용 불가.

{탭 == 0 ? <div>내용0</div> : null}
{탭 == 1 ? <div>내용1</div> : null}

연달아 사용하려면

각각 중괄호 써 줘야한다.

 

if 문 쓰기 >>

html 안에서는 if 조건문 같은거 못씀.

= 바깥에서 쓰기.

= export default Detail; 위에서 써줬다.

/* 조건문 생성 - state에 따라서 UI가 어떻게 보일지 */
if (탭 == 0) {
  <div>내용0</div>;
}

조건이 참일 때

실행하고 싶은 코드 중괄호에 작성.

if (탭 == 0) {
  <div>내용0</div>;
} else if (탭 == 1) {
  <div>내용1</div>;
} else if (탭 == 2) {
  <div>내용2</div>;
}

else if = 그게 아니면 만약에

 

컴포넌트 사용해서 if 문을 넣어주기

if (탭 == 0) {
  <div>내용0</div>;
}
if (탭 == 1) {
  <div>내용1</div>;
}
if (탭 == 2) {
  <div>내용2</div>;
}

if 문을 분리해준다.

function TabContent() {
  if (탭 == 0) {
    <div>내용0</div>;
  }
  if (탭 == 1) {
    <div>내용1</div>;
  }
  if (탭 == 2) {
    <div>내용2</div>;
  }
}

컴포넌트 TabContent 작성 후 if 문 담아주기.

function TabContent() {
  if (탭 == 0) {
    return <div>내용0</div>;
  }
  if (탭 == 1) {
    return <div>내용1</div>;
  }
  if (탭 == 2) {
    return <div>내용2</div>;
  }
}

※TabContent 컴포넌트 쓸거면 여기다 return 문을 꼭 써야함.

= 컴포넌트는 return 문이 없으면 제 기능을 못함.

   <div className="container">
      {alert == true ? (
        <div className="alert alert-warning">2초 이내 구매 시 할인</div>
      ) : null}
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
      {/* 탭 UI 만들기 */}
      <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link eventKey="link0">버튼0</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link1">버튼1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link2">버튼2</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent />
    </div>

container 박스 하단에

만든 컴포넌트 삽입해주면 됨.

 

근데 잘 동작 안함

= tab 이라는 state 가 정의 안됐기 때문

 

TabContent 라는 컴포넌트 안에서는

탭 이라는 state가 없음.

= Detail 함수 안에 있다.

 

---

props 해주기
Detail -> TabContent

function TabContent(props) {
  if (props.탭 == 0) {
    return <div>내용0</div>;
  }
  if (props.탭 == 1) {
    return <div>내용1</div>;
  }
  if (props.탭 == 2) {
    return <div>내용2</div>;
  }
}

state를 1로 해놓으면

1로 바뀌는 거 확인가능.

 <자식컴포넌트 작명={state이름} /> 

TabContent 탭={탭}></TabContent>

이것도 까먹지 말고 해주기. 

---

 0번 버튼 누르면 0번 내용
1번 버튼 누르면 1번 내용
2번 버튼 누르면 2번 내용 

 

탭이라는 state를 0, 1, 2로 변경할 때마다 

원하는 내용들이 잘 보임.

 

 0번 버튼 누르면 0번 내용

1번 버튼 누르면 1번 내용

2번 버튼 누르면 2번 내용 

 

을 보여주고 싶으면 탭 스위치만 건드려주기.

버튼을 누르면 뭐 해주세요 라고 코드짜기. - onClick 추가

  <Nav.Link onClick={() => {}} eventKey="link1"> 버튼1 </Nav.Link>

탭 이라는 state를 1로 변경하라고 하기

= 탭 변경함수 사용

원하는 탭 누를 때 마다 state를 변경 (탭 변경함수)

<Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>
      <Nav.Link onClick={()=>{ 탭변경(0) }} eventKey="link0">버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={()=>{ 탭변경(1) }} eventKey="link1">버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={()=>{ 탭변경(2) }} eventKey="link2">버튼2</Nav.Link>
    </Nav.Item>
</Nav>

버튼 누를 때 마다 원하는 탭 내용을 보여줄 수 있음

---

참고사항 : props 쉽게 쓰는 방법
-  props의 축약 버전

/* 조건문 생성 - state에 따라서 UI가 어떻게 보일지*/
function TabContent(props) {
  if (props.탭 == 0) {
    return <div>내용0</div>;
  }
  if (props.탭 == 1) {
    return <div>내용1</div>;
  }
  if (props.탭 == 2) {
    return <div>내용2</div>;
  }
}

아까 만들어 놓은 컴포넌트

- props 사용한 상태.

props의 축약 버전
props 이름을 중괄호 열고 등록

function TabContent({ 탭 }) {
  if (탭 == 0) {
    return <div>내용0</div>;
  }
  if (탭 == 1) {
    return <div>내용1</div>;
  }
  if (탭 == 2) {
    return <div>내용2</div>;
  }
}

밑에도 props.탭 

이렇게 props 키워드 필요없이 사용 가능

만약 props가 여러 개 있을 경우
, 쓰고 props 이름 써주기

function TabContent({ 탭 , props2 }) {
  if (탭 == 0) {
    return <div>내용0</div>;
  }
  if (탭 == 1) {
    return <div>내용1</div>;
  }
  if (탭 == 2) {
    return <div>내용2</div>;
  }
}

---

if 문 생략

밑에다가 array를 하나 만들기

function TabContent({ 탭 }) {
  if (탭 == 0) {
    return <div>내용0</div>;
  }
  if (탭 == 1) {
    return <div>내용1</div>;
  }
  if (탭 == 2) {
    return <div>내용2</div>;
  }
  [] // 여기에 array 만들기.
}

 array 배열 안에다가 html 내용들을 넣기

function TabContent({ 탭 }) {
  if (탭 == 0) {
    return <div>내용0</div>;
  }
  if (탭 == 1) {
    return <div>내용1</div>;
  }
  if (탭 == 2) {
    return <div>내용2</div>;
  }
  [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>] // 여기에 array 만듦. 
  // 그리고 html내용 넣기.
}

if 문 삭제 하기

function TabContent({탭}){
     [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ]
}

탭 state를 집어넣기

function TabContent({탭}){
     [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][탭] //탭 state넣음
}

function TabContent({탭}){
     [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][0] 
}

만약 0을 쓰면

왼쪽에 있는 자료중에서 0번째 자료를 꺼내 달라는 의미. 

= <div>내용0</div> 이게 자리에 남음.

 

근데 탭이라는 state를 집어넣게 된다면 >>

= 탭이라는 state가 0이면

<div>내용0</div> 이거 보여주고

1이면 <div>내용1</div> 이렇게 보여줌. 

끝에 탭 state를 집어넣는 이유

function TabContent({탭}){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][탭]
}

탭 변수가 숫자 값을 가지면,
[탭]은 해당 숫자를 배열의 인덱스로 사용하게 되어 배열의 특정 요소를 선택하는 데 사용

탭 변수 살펴보면

  let [탭, 탭변경] = useState(0);

이렇게 숫자 0 이 집어넣어져 있다.

     {/* 탭 UI 만들기 */}
      <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              탭변경(0);
            }}
            eventKey="link0"
          >
            버튼0
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              탭변경(1);
            }}
            eventKey="link1"
          >
            버튼1
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              탭변경(2);
            }}
            eventKey="link2"
          >
            버튼2
          </Nav.Link>
        </Nav.Item>
      </Nav>

탭 UI를 살펴보기 - 탭변경함수 사용 확인 - 탭의 상태 변경

onClick 이벤트를 통해 탭변경 함수가 호출되면,
그 함수에 전달된 숫자 값이 탭 상태를 변경한다.
이 변경된 탭값이 배열의 인덱스로 사용되어
TabConten 컴포넌트에서 해당 인덱스의 요소를 반환하게 된다. 

return 문 달아주기 - 컴포넌트 사용하기 위해선 return 문 달아줘야 함.

 

function TabContent({탭}){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][탭]
}

{탭} 사용

function TabContent(props){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ][props.탭]
}

props 사용