세계최강용사의 개발일기

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 관련 설정을 복사 + 붙여넣기 하면된다.

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

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