세계최강용사의 개발일기

npm install styled-components @types/styled-components

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)
• 라이브러리 인스턴스 제거

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

오늘도 많이 배운다 

다들 화이팅 ~

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

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이다. 요렇게 만들면

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

:)

React는 데이터가 변할때마다 refresh 함.

이때 데이터가 변할때마다 refresh하지않고 화면 render시 초기 한번만, 혹은 특정 데이터를 바라보면서 변경하고 싶을때 

UseEffact를 사용한다.

import { useState, useEffect } from "react";
function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  console.log("test");
  const iRunOnlyOnce = () => {
    console.log("I run only one");
  };
  useEffect(() => {
    console.log("i run only one"); //최초 한번
  }, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("Search For", keyword);
    }
  }, [keyword]); //키워드 변경시

  useEffect(() => {
    console.log("i run when keyword & counter change"); //키워드, 카운터 둘다 변경시 
  }, [keyword, counter]);
  return (
    <div className="App">
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <p>{counter}</p>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

Prettier란?

코드의 가독성을 높이고 협업 시 코딩규칙을 통일시키는 것이 좋다.

Prittier는 개발자가 작성한 코드를 미리 정해둔 스타일 규칙에 맞게 변환해주는 Fommater이다.

VScode Extentions으로 설치하기.

1. 먼저 Prittier를 설치한다.

2. 설치가 완료되었으면 Prittier설정을 한다.

{
  "workbench.colorTheme": "Monokai Pro (Filter Octagon)",
  "workbench.iconTheme": "Monokai Pro (Filter Octagon) Icons",
  "editor.fontWeight": "500",
  "editor.fontFamily": "Ubuntu Mono derivative Powerline",
  "editor.fontSize": 17,
  "window.zoomLevel": 1,
  "terminal.integrated.fontSize": 15,
  // 여기서부터 추가함
  "javascript.format.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.arrowParens": "avoid",
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "es5"
}

Prittier 관련 설정을 복사 + 붙여넣기 하면된다.

각 설정이 어떤 기능을 의미하는지는 검색하여 찾아보도록 하고 ~

추가적으로 필요한 규칙또한 검색해서 적용하도록 하자.