22.10.28 React 7일차 / UI 탭, Context API, Redux 설치

// Detail 페이지에서의, 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>
        <div>내용0</div>
        <div>내용1</div>  
        <div>내용2</div>

react-bootstarp 에서 이미 존재하는  ui탭 이미지를 불러와서 detail 페이지에 추가해주었습니다.

 

코드 내에서 // defaultActiveKey 같은 경우는 해당 페이지를 처음 진입했을때 보여줄 탭을 설정하는 것 입니다.

 

해당 이미지에 추가된 모습을 볼 수 있다

탭 버튼을 눌렀을때 올바르게 내용이 바뀌게 설정하려면 따로 함수를 설정한 후 코드를 추가해야 합니다.

 

    let [tab, tabSet] = useState(0);

tab의 상태를 저장할 state를 만든 후 밑으로 돌아와 해당 tab 이 0이면 버튼 0 탭의 내용을, 해당 tab state가 1이면 버튼1 내용이 보이는 방법으로 연산자 혹은 if문을 사용해주도록 합니다. if문을 이용하려면 컴포턴트화를 진행시켜주어야 합니다.

 

/ if문 컴포넌트화 진행

 

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

      <TabContent tab={tab}/>



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

 

props로 위에 설정해주었던 tab을 불러와야 컴포넌트에서도 적용이 된다. return 값을 주어야 제대로 작동함

 

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

그 후, onClick에 tabSet으로 tab값을 변경시키는 값을 넣어서 작동확인.

 

정상적으로 작동하는 것을 알 수 있다.

 

//  Context API 

 

Single page Application의 단점은 컴포넌트간의 State 공유가 어렵다. ( 부모자식 관계라면 props를 사용해 공유가 가능 )

props이외에도 Context API, Redux 등의 외부라이브러리가 존재한다. 이번엔 Context API는 props 전송없이 state를 공유가능하지만 잘 사용되진 않는다. (성능이나 재활용등의 문제가 존재하기 때문)

 

1. creatContext 의 import가 필요함.

 

2. <Context> 로 원하는 컴포넌트를 감싸야함

 

3. 공유를 원하는 state를 셋팅해주어야한다. value={ {state1, state2, ... } }

 

 

// 장바구니 페이지

 

새로운 페이지가 필요하기 때문에 routes 폴더에 새로운 페이지.js 파일을 생성해준다. Cart.js로 생성해주었다.

 

import { Table } from 'react-bootstrap' 

function Cart() {
    return (
        <div>
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>안녕</td>
                        <td>안녕</td>
                        <td>안녕</td>
                    </tr>
                </tbody>
            </Table> 
        </div>
    )
}

export default Cart

react-bootstrap에서 표를 불러들어서 사용해주었다. 상단에 import 해주어야하는 것을 꼭 명심하자

 

해당 Cart.js를 app.js에서 적용시키는건 여태 해왔던 다른 페이지 추가와 같다.

 

정상적으로 적용됐다면 cart 주소를 입력했을 때 해당 페이지로 넘어온다. 이대 해당 cart 표에 장바구니 데이터를 불러들여야 하는데 이는 최상위 app.js에다가 작성해주어야한다. 그러면 cart.js에서 사용할때 모두 props를 사용해야 하는 상황이 벌어지기때문에 Redux를 설치하여 사용할 생각이다. (컴포넌트들을 담아둘 수 있는 js)

 

// Redux 설치 or 셋팅

 

package.json에서 react 버전이 18.1 이상인 경우에만 사용 할 수 있으니 주의

 

터미널을 켜서 npm install @reduxjs/toolkit react-redux 입력.

 

설치가 완료됐다면 메인 src폴더에 store.js 파일을 생성한 후

 

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

이 store.js는 state들을 보관하는 파일이다.

 

그 후 index.js로 가서 

 

    <Provider store={store}>    
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <App />
      </BrowserRouter>
    </Provider>

를 추가해주면 된다. ( Provider )