스파르타코딩 내일배움캠프 DAY 26 TIL - 리액트로 예제만들기

아직은 쉽지 않은 리액트...

리액트에 대해 조금은 더 익숙해져야 적응이 될 것 같아서, 유튜브에서 다양한 예제를 찾아보면서 공부를 하고 있다.

계속 반복을 하다보니 조금 감이 오는 것 같기도 하면서도, 아직은 긴가민가 한 리액트..
물론 꾸준한 반복이 답이겠지만, 평소에 다뤄보지 않은 것들이라서 조금 생소하기도 하다.

---

useState로 예제 만들기 시작

다행히도 인터넷에는 다양한 예제들이 많이 있어서 덕분에 감을 익히는데 조금 도움이 되고 있다.

위 움짤처럼, 해당 버튼을 누르면 시간이 올라가며
버튼에 onClick 기능을 걸고, handleClick 함수를 넣었다.
그리고 useState를 통해 값을 저장하고 변경을 해보았다.
먼저 newTime을 변수로 잡고,
if 문을 활용하여 time이 11보다커지면, 다시 숫자를 1로 초기화 시키고
그렇지 않으면 1씩 증가하는 식을 써봤다.

마지막에는 setTime(내가 변경할 것)에 설정만 해주면 끝이다.

import React, { useState } from "react";

const App = () => {
  // time이라는 변수와 setTime이라는 함수
  const [time, setTime] = useState(1);

  const handleClick = () => {
    // newtime 변수 생성
    let newTime;

    //time이 12시보다 커져있다면
    if (time > 11) {
      // time을 1로 바꾸고
      newTime = 1;
      // 그게아니라면, new time은 계속 1을 더해주면 된다.
    } else {
      newTime = time + 1;
    }
    // 마지막에는 우리가 만든 newtime 이란 변수를 넣어주면 된다.
    setTime(newTime);
  };
  console.log("업데이트");
  return (
    <div>
      <span>현재 시각 : {time}시</span>
      <div>
        <button onClick={handleClick}>버튼</button>
      </div>
    </div>
  );
};

export default App;

---

할일추가하기

다음은 가장 기초이자 중요한 투두리스트이다.

처음에는 투두리스트의 기본적인 개념이 정말 이해가 되지 않았지만

자꾸 가벼운거부터 하나씩 만들어보니 어느정도 감이 잡히고 있다. 사실 계속 더 만들어봐야 감이 잡힐 것 같지만 그래도 어느정도 희망이 보이기 시작한다.
투두리스트에서 가장 중요한건, setInput을 내가 input 안에 적은 event.target.value를 넣는 것이다. 그 후 Upload란 버튼을 클릭하면, onClick 기능을 이용해서 setNames에 넣어주는 것이다.
마지막으로 화면에 구현하기 위해 {names}를 map 함수를 이용해서 새로운 배열을 만들어주면 끝이다.

import React, { useState } from "react";

const App = () => {
  const heavyWork = () => {
    console.log("무거운작업");
    return ["홍길동", "김민수"];
  };

  const [names, setNames] = useState(() => {
    return heavyWork();
  });
  const [input, setInput] = useState("");

  const handleInputChnage = (event) => {
    setInput(event.target.value);
  };

  const handleUpload = () => {
    setNames((prevState) => {
      console.log(prevState);
      return [input, ...prevState];
    });
  };
  console.log(input);
  return (
    <div style={{ padding: "30px" }}>
      <input type="text" value={input} onChange={handleInputChnage} />
      <button onClick={handleUpload}>upload</button>
      {names.map((name, idx) => {
        return <p key={idx}>{name}</p>;
      })}
    </div>
  );
};

export default App;

---

useEffect

유즈이펙트 설명도 있어서 살짝 따라 만들어봤지만, 여기는 맛보기로 만족한다..

이부분은 얼른 공부를 해서 추후에 다시 돌아봐야 겠다.

import React, { useState, useEffect } from "react";
const App = () => {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("");
  const handleCounter = () => {
    setCount(count + 1);
  };

  const handleInputChange = (e) => {
    setName(e.target.value);
  };
  // 랜더링 될 때마다 매번 실행됨

  // useEffect(() => {
  //   console.log("랜더링변화");
  // });

  // useEffect(() => {
  //   console.log("name변화");
  // }, [name]);

  // useEffect(() => {
  //   console.log("count변화");
  // }, [count]);

  useEffect(() => {
    console.log("마운팅");
  }, []);

  return (
    <div>
      <button onClick={handleCounter}>Update</button>
      <span>Count : {count}</span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name : {name}</span>
    </div>
  );
};
export default App;