세계최강용사의 개발일기

Material-UI에서 maxWidth는 Container, Dialog, Drawer, Snackbar 등의 컴포넌트에서 사용할 수 있는 속성으로, 최대 너비를 설정할 수 있습니다. 이때, maxWidth값으로 사용할 수 있는 문자열은 다음과 같습니다.

• "xs" (extra small)
• "sm" (small)
• "md" (medium)
• "lg" (large)
• "xl" (extra large)

기본 값은 "lg"입니다. xs, sm, md 등의 값은 화면 크기에 따라 자동으로 조정되는 반응형 디자인에서 유용하게 사용됩니다.

리엑트 배포를하려면 먼저 build를 해야한다.

package.json에 아래와 같이 설정하자.

 "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

GENERATE_SOURCEMAP=false를 사용하는 이유는 sourcemap을 제거하여,

웹 사이트를 개발자도구로 확인시 소스코드가 직관적이지 않게 해준다.

위와 같이 설정 후 npm run build 명령어로 빌드해준다.

그 후 bash창에 아래와 같이 입력한다

npx serve  -s build -l 11119

11119 포트로 빌드한 리엑트가 실행된다.

What React Router ?

리엑트 url path경로에 맞는 화면은 렌더링 해줍니다.

How Install ?

npm install react-router-dom

How use React Router?

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/Second" element={<Second />}></Route>
        <Route path="/" element={<Login />}></Route>
      </Routes>
    </Router>
  )
}

샘플 사용방법입니다.

감사합니다 :)

리엑트 개인프로젝트를 진행하던 중, useEffect와 useState에대해 잘못 이해하고 있어, 

기록을 위해 남긴다.

나는 useEffect를 초기 화면 페이지 로딩 시 한번만 호출해주기 위해 사용한다고 이해하고 있었다 !

deps의 개념은 흐지부지하게 기억하고 있어 이슈가 발생하였는데 발생한 이슈는

나는 setStatus를 2개 사용하고 있다.

1. 날짜 컴포넌트 바꿀때

2. 날짜가 바뀔때 바뀐 날짜를 이용해 API를 호출해 가져와서 셋팅해줄때
버튼을 누를때마다 이게 setState가 비동기적으로 동작하여, 날짜를 찍어보니 서로 상이한 날짜를 찍고 있었다 !!

해당 부분에 대해서 어떻게 해결을할까 고민하던중 ~ useEffect의 deps의 개념이 정리된 블로그를 확인했다 !

useEffect(()=>{
    
 }, [count])

useEffect의 요런 코드가 있을때,

count State가 변경되면 useEffct안의 내용을 실행해주세요로 동기적으로 동작할수 있게 해준다는것을 배웠다 !!

그래서 setState를 두번하던 소스를 제거하고

  useEffect(() => {
    getUnitList()
  }, [weekIdx])

소스를 위와같이 수정하니 정상적으로 동작하는 부분을 확인했다 ~~

마지막으로 하나 더 useEffect에는 컴포넌트가 언마운트(사라질 때) 작업도 해줄 수 있다 

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

보통 마운트 시 (화면에 나타날때)

• props로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API요청
• 라이브러리 사용(D3, video.js등)
• setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

언마운트 시 (화면에서 사라질때)

• setInterver, setTimeout을 사용한 작업들 clear하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

위 작업을 한다고 보면 될 것 같다 !

오늘도 많이 배운다 

다들 화이팅 ~

작년 12월부터 회사에서 회사에서도 리엑트를 만져볼일이 생길 것 같아

리엑트 공부를 하다가 백엔드가 없다는 생각이 번뜩 ! 들어서 Node 속성으로 공부하고,

다시 리엑트로 돌아왔다.

토이프로젝트 만들고 있는데 재밌내 ㅎㅎ

노드, 리엑트 공부하시는분들 댓글로 소통 많이해요 ~

개인 프로젝트를 진행하면서,

react-bootstrap 패키지를 활용하여 작업했다. 기록용으로 남긴다 :)

components/Header.js

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { House } from 'react-bootstrap-icons'
import Modal from './Modal'
export function Header() {

  /* Modal Source */
  const [show, setShow] = useState(false)
  const openModal = () => {
    setShow(true)
  }
  const closeModal = () => {
    setShow(false)
  }
  /* Modal Source */
  
  return (
    <header>
      <div className="px-3 py-2 text-bg-dark">
        <div className="container">
          <div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <Link
              className="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"
              to={`/`}
            >
              Home
            </Link>
            <ul className="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
              <li
                onClick={() => {
                  openModal()
                }}
              >
                <Link className="nav-link text-secondary">
                  <House size={24} className="bi d-block mx-auto mb-1" />
                  <span style={{ fontSize: 15 }}>유닛등록</span>
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      /* Modal Source*/
      <Modal
        show={show}
        open={openModal}
        close={closeModal}
        header="유닛등록"
      />
    </header>
  )
}

export default Header

1. 나는 Header 부분 버튼에 Modal을 사용해야해서, Modal show, close를 위한 useState설정을 Header에 했다.

2. Header 부분에 Modal 컴포넌트를 붙힌다.

components/Modal.js

import React from 'react'
import Button from 'react-bootstrap/Button'
import Modal from 'react-bootstrap/Modal'
import AddUnit from './Modal_AddUnit'

//show: 보여주기 여부
//open: Header.js에서 가져온 모달을 열기 위한 props
//close: Header.js에서 가져온 모달을 닫기 위한 props
//header: 모달 Title
function ModalBody({ show, open, close, header }) {
  const handleClose = close
  let modalBody
  if (header === '유닛등록') {
    //title이 유닛등록이면 유닛등록용 ModalBody Component가져오기
    modalBody = <AddUnit />
  } else {
    //Sample
    modalBody = <Modal.Body>Sample</Modal.Body>
  }
  return (
    <>
      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>{header}</Modal.Title>
        </Modal.Header>
        {modalBody} //Custom ModalBody
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

export default ModalBody

1. Header.js에서 show, openModal, closeModal, Header props를 가져와서 부모로부터 모달을 컨트롤 할 수 있도록 함

2. Modal을 매번 만들기 귀찮아 Body별로 관리하기위해 분기처리하였음

components/Modal_AddUnit.js

import React from 'react'
import Modal from 'react-bootstrap/Modal'

function AddUnit({ header }) {
  return (
    <>
      <Modal.Body>...Add Unit Body</Modal.Body>
    </>
  )
}

export default AddUnit

Custom용으로 만든 Body이다. 요렇게 만들면

유닛 등록을 클릭하면 아주 잘 동작하는 것을 알 수 있다 !!!

:)