세계최강용사의 개발일기

리엑트 개인프로젝트를 진행하던 중, 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;

약 6년간 다니던 C#개발자를 그만두고 자바 전향을 꿈꿧으나 
자바 개발자 이직 후 C#과 크게 차이를 못느껴서 3개월만에 퇴사를하고 !

새롭게 관심이 생긴 Web3쪽으로 이직을하고 정신나간 대표를 보고 정신이 번쩍들었다.

"아 회사는 거의다 비슷비슷하고 잘못 이직하는순간 나락가는건 한순간이겠구나~ 그냥 호기심은 개인적으로 배우고 일은 한우물만 열심히 파자" 라고 생각이 들어

급하게 이곳 저곳 이력서를 넣다 C# 같은 계열직종으로 이직을 한지 3개월이 넘었다

이직 후 회사생활 장점

1. 자율출퇴근제 : 주 40시간만 채우면(11~15 필수근무) 언제 퇴근해도 상관없다

2. 팀 분위기 : 지금까지 다녔던 직장중에 제일 자유롭고 재미있다. (수평적인 관계여서 편하게 말할 수 있다)

3. 팀 빌딩비 : 한달에 인당5마넌씩 지원이 되서 팀회식을 할 수도 있고 마음맞는 팀원끼리 문화생활을 즐길 수 있다.

4. 도서비 무한 지원 : 책을 잘 읽는 편은 아니지만 없는거보단 낫지.

5. 버스가 한번에 와서 자면서 올수 있다.

6. 직급을 안부르고 영어이름이나 ~~님 이라고 하는 문화가 아주좋다

7. 잘 대해주려고 노력하는 것 같아 팀원분들한테 고맙다.

이직 후 회사생활 단점

아직까지는 딱히 없다.

이직 후 회사생활 아쉬운점

1. 이전 직장들에서는 자기개발비라고해서 1년에 최대 30만원을 지원해주어서 헬스나 학원 등록할때 보태 쓰는게 좋았는데, 요런게 있으면 좋을 것 같기도하다

2. 나도 모니터가  세로로 되었음 좋겠다.