[DevNote] 0211

Noah Ko·2022년 6월 18일

DevNote

목록 보기

13/31

오늘 내가 공부 한 것.

오늘은 처음으로 백엔드와 프론트엔드 협업을 시작했는데, 아직까지는 어떤 것인지 느낌이 잘 오지는 않는다. API 통신을 해야 하는데, AXIOS에 대해서 잘 모르고 감이 잘 오지 않는다.
로그인과 회원가입 페이지를 맡았는데, 리덕스에 대한 개념을 조금 이해햐고 미니 프로젝트에 임해야 할 것 같다.

오늘 배운 내용 정리.

1.프로젝트 시작 순서

CSS를 모듈화 하여 사용하는 방법

이름을 Button.module.css로 만들고

.btn {
  background-color: tomato;
  color: white;
  border: none;
  border-radius: 30px;
}

import하게 되면 object로 들어오기 때문에 .속성값으로 가져와야 한다.

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

Button.proTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

2. useEffect()?

useEffect는 함수를 한번말 실행시키고 싶을 때 사용하는 리액트 훅이다.

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("i run all the time");
  useEffect(() => {
    console.log("i run only once");
  }, []);
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]);
  useEffect(() => {
    console.log("I run when keyword and count change!");
  }, [keyword, counter]);

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

콘솔에 보게 되면
console.log("i run all the time"); 는 state가 바뀔때마다 렌더링 되지만,
useEffect(() => { console.log("i run only once"); }, []); 의 경우에는 바뀌어야 할 인자가 정해지지 않아서 페이지가 처음 렌더링 될때 실행되고 다시 실행되지 않는다. => 이런건 사용자 이름 같은거 띄울 때 좋을 듯?
useEffect(() => { console.log("I run when 'keyword' changes."); }, [keyword]); 와 같은 경우에는, 이전과 동일하지만 마지막 keyword라는 것에 변화가 있을 경우에만 함수가 실행되도록 한 것이다.
useEffect(() => { console.log("I run when 'counter' changes."); }, [counter]);는 카운트가 변할때만 실행되도록 하는 것이다.
두개의 인자를 받고 싶을 때는 useEffect(() => { console.log("I run when keyword and count change!"); }, [keyword, counter]); 와 같이 배열에 두개의 인자를 넣어주면 된다.