블록체인 TIL-3Week-21Day주말(일요일)

어제 공부했던 components와 useState에 대해 내가 이해했던 부분들을 정리해보려고 한다.

☑️ components.

• components 폴더를 따로 생성해 그곳에 App.jsx에 중복되는 내용들을 정리할 파일을 만들 수 있다.

• 이렇게 중복되는 내용들을 정리하여 보관하면 같은 중복되는 코드를 사용해야할때 보다 쉽게 그 코드를 간략한 내용으로 가져와서 사용할 수 있다.

const Header = () => {
  return (
    <header className="bg-blue-100 h-12 md:h-20">
      <div className="max-w-screen-xl mx-auto h-full flex justify-between items-center">
        <div>
          <div>Dio's portfolio</div>
        </div>
        <ul className="flex text-xs md:text-base gap-2 md:gap-8">
          <li>Introduce</li>
          <li>portfolio</li>
          <li>ContactMe</li>
        </ul>
      </div>
    </header>
  );
};

export default Header;

• 위 코드를 components안에 파일을 생성해 정리를 하면 같은 내용을 써야하거나 내용을 간략하게 정리하여 보관하고 싶을때 유용하게 사용할 수 있다. 이 components로 정리된 파일을 토대로 아래코드와 같이 정리를 할수가 있다.

import Header from "./components/Header";
import Introduce from "./components/Introduce";
import Portfolio from "./components/Portfolio";
import ContactMe from "./components/ContactMe";

function App() {
  return (
    <div className="bg-orange-100 min-h-screen">
      <Header />
      <main>
        <Introduce />
        <Portfolio />
        <ContactMe />
        <footer className="bg-white max-w-screen-xl mx-auto flex justify-end items-center py-1 md:py-2">
          2023, Designed by, Dio
        </footer>
      </main>
    </div>
  );
}

export default App;

• 기존에는 components 안에있는 파일의 코드가 여기 나열되어 있어야 하지만 components 폴더를 만들고 해당 위치에 있는 코드를 파일로 만들어 저장해두면 위 이미지에 있는 "Header"부분의 코드처럼 작성하여 가져올 수 있다.

• 마찬가지로 다른 코드들도 그렇게 작성을 할 수 있고, 다른 예를 들어보자면 Portfolio를 들 수있겠다.

import PortfolioCard from "./PortfolioCard";

const Portfolio = () => {
  return (
    <ul className="bg-indigo-100 max-w-screen-xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-items-center gap-8 py-8">
      <PortfolioCard />
      <PortfolioCard />
      <PortfolioCard />
      <PortfolioCard />
      <PortfolioCard />
      <PortfolioCard />
      <PortfolioCard />
      <PortfolioCard />
    </ul>
  );
};

export default Portfolio;

• 위 코드와 같이 Portfolio는 여러개의 같은 코드를 파일안에 가지고 있게 되는데 이 또한 components를 이용하여 App.jsx와 똑같이 적용하여 정리할 수 있다. 그 예가 위에 보이는 PortfolioCard이다.

const PortfolioCard = () => {
  return (
    <li className="bg-purple-100 w-60 h-72 rounded-xl">
      <div className="bg-yellow-100 w-full h-1/2 rounded-t=xl">
        프로젝트 이미지
      </div>
      <div className="text-xl font-bold mt-2 mx-2">프로젝트 제목</div>
      <div className="mt-2 mx-2">프로젝트 내용</div>
    </li>
  );
};

export default PortfolioCard;

• 이렇게 components 폴더안에 PortfolioCard 파일을 만들고 Portfolio안에 반복되고 있던 코드를 작성해준다. 그리고 위에 있던 Portfolio 코드처럼 "PortfolioCard"를 작성하여 반복되는 부분을 정리할 수 있다.

✅ 정리.

이렇게 components는 쉽게 반복되거나 자주사용하는 코드를 가져올 수 있도록 정리할 수 있다. 또한 이렇게 정리를 해놓으면 메인코드를 작성하는 App.jsx를 보다 정리된 상태로 관리할 수 있게 된다.

☑️ State 문법.

• 변수와 State는 차이점이 있는데 유저가 수정을 하거나 다른 데이터가 들어왔을때 변수가 변경이 되는데 그러면 HTML이 같이 변경이 되어줘야 하는데 변경이 자동으로 되지 않는다.

• 변경하기 위해선 직접 코드를 짜야한다.
  하지만 변수와 다르게 State를 사용하면 State안에 들어있던 내용이 변경이 되는경우 State를 쓰던 HTML은 자동 재렌더링이 된다. 내가 직접 변경할 필요없이 자동으로 변경되 내용으로 변한다. 그래서 State문법을 사용하는것이다.

• Destructuring 문법.
  Array자료라는것이 있는데 한 곳에 여러가지 자료를 모아서 사용하고 싶을때 Array를 만들어 사용한다.

let num = [1, 2]; (num이라는곳에 1,2를 보관.)
그리고 변수로 빼내고 싶을때 아래와 같은 코드를 사용.

let a = num[0]; (num중에 0번째 자리를 뽑아주세요
라고 코드를 작성하면 a의 위치에 1위 노출됨.)

let c = num[1]; (마찬가지로 num중에 1번째 자리를
뽑아주세요 라고 코드를 작성하면 c의 위치에 2가 노출됨.)

• 그런데 위 코드를 더 편하게 쓸 수 있는 코드가 있음.

let [a, c] = [1, 2];

이 코드처럼 a라는 변수에 1이 위치하게 되고, c라는 변수에
2가 위치할 수 있게 하는 문법이 Destructuring 문법이다.

• 코드를 보는 방법.

let [글제목, b] = useState('남자코트추천');
위와 같은 코드가 있을때 ()안에는 Array 자료가 남는데 
첫번째 자료에 남자코트추천이 남아있는것이고,
변경될 함수가 두번째 자료에 남아있는것이다. 

const result = 0;
return (
    <div className="bg-red-100 min-h-screen flex flex-col justify-center items-center">
      <h1 className="text-2xl font-bold mb-4">계산기</h1>
      <div className="text-3xl font-black mb-4">{result}</div>

• 해당 코드를 통해 "계산기"와 "result"를 만들어주고 result는 {}를 사용해 값을 가져온다. 또한 css적인 요소를 적용해 보기편하도록 디자인을 해준다.

<div className="mb-4">
        <input
          class="border-2 focus:outline-none focus:border-purple-400 rounded-lg px-4 py-2 text-xl"
          type="text"
        />
        <input
          class="border-2 focus:outline-none focus:border-purple-400 rounded-lg px-4 py-2 text-xl ml-4"
          type="text"
        />
      </div>

• 전체 div안에 다시 div를 만들고 계산을 하기위한 두개의 input창을 만들어준다.

<div>
        <botton className="border-2 px-2 py-1 rounded-lg border-red-500 text-red-500">
          Add
        </botton>
        <botton className="border-2 px-2 py-1 rounded-lg border-orange-500 text-orange-500 ml-4">
          Subtract
        </botton>
        <botton className="border-2 px-2 py-1 rounded-lg border-yellow-500 text-yellow-500 ml-4">
          Multiply
        </botton>
        <botton className="border-2 px-2 py-1 rounded-lg border-green-500 text-green-500 ml-4">
          Divide
        </botton>
      </div>

• 그리고 두개의 input창을 연결해줄 사칙연산 버튼을 만들어준다.

import { useState } from "react";

const App = () => {
  const [num1, setNum1] = useState();
  const [num2, setNum2] = useState();
  const [result, setResult] = useState(0);

• useState()를 사용하여 num1, num2, result 상태를 정의하고, 각각 초기값을 설정한다. num1과 num2는 입력한 숫자를 저장하고, result는 계산 결과를 저장한다.

• useState를 사용하기 위해서는 반드시 상단에 import { useState } from "react";를 입력해줘야한다. 보통 useState를 사용하면 자동으로 생성되는데 생성이 되지 않았다면 꼭 작성해줘야한다.

💠 한가지 더 부연설명을 하자면 result가 위치한 자리는 useState가 잠시 저장되는 장소. 즉 노출되는 고정값이고, setResult가 있는 위치는 result의 변경을 도와주는 함수가 들어가는 위치다.

const onClickAdd = () => {
    if (isNaN(num1) || isNaN(num2)) {
      alert("숫자를 입력해주세요.");
      return;
    }

    setResult(parseInt(num1) + parseInt(num2));
  };

• 클릭을 할수있도록 적용하기 위해서 onClick를 사용하고 setResult(parseInt(num1) + parseInt(num2)); 코드를 입력하여 연산을 수행할 수 있도록 함수를 만들어준다.

  • 또한, num1과 num2의 값을 parseInt() 함수를 사용하여 정수로 변환한 후, 연산을 수행하고 그 결과를 setResult() 함수를 사용하여 result 상태에 저장하도록 한다.

  • 그리고 모든 함수의 if문에 isNaN() 함수를 사용하여 입력된 값이 숫자인지 확인한 후, 숫자가 아닌 경우에는 경고 메시지를 송출하도록 설정하고 문제가 있는경우 return함수를 사용하여 함수를 종료시키도록 작성한다.

• 해당코드와 유사하게 모든 사직연산이 들어간 코드에 적용시킬 수 있다.다만 나누기의 경우 소수점이 생길 수 있기 때문에 아래와같이 parseInt()로 한번더 감싸서 정수로 만들 수 있다.

setResult(parseInt(parseInt(num1) / parseInt(num2)));

<botton
          onClick="{onClickAdd}"
          className="border-2 px-2 py-1 rounded-lg border-red-500 text-red-500"
        >

• 위에 연산을 수행할 수 있는 함수를 작성했다면 botton 코드에을 위와같이 추가하여준다. 다른 botton코드에도 해당 코드에 맞는 사칙연산으로 변경하여 추가해주면 된다.

const onChangeNum1 = (e) => {
    setNum1(e.target.value);
  };

  const onChangeNum2 = (e) => {
    setNum2(e.target.value);
  };

• 해당코드는 onChangeNum1() 함수와 onChangeNum2() 함수를 적용해 각각 num1과 num2의 값을 변경하기 위한 함수다. 숫자가 입력되면 setNum1() 또는 setNum2() 함수를 사용하여 num1 또는 num2의 값을 변경하도록 한다.

<input
          class="border-2 focus:outline-none focus:border-purple-400 rounded-lg px-4 py-2 text-xl"
          type="text"
          value={num1}
      onChange={onChangeNum1}
        />

• 위에 onChange 함수를 사용하여 코드를 작성했다면 하단에 input 코드에 추가로 value="{num1}" 와을 작성하여 변경값이 적용될 수 있도록 해준다.

❗추가적으로 실수했던 부분은 {num1}나{onChangeNum1}처럼 함수로 결과값이 나와야하는 코드에 ""가 함께 작성되는경우 문자열로 결과값이 도출되 오류가 난다. 이점을 유의해야한다.

🌜하루를 마치며..

이렇게 오늘 components와 state문법에 대해 코드를 작성해보고 공부해보았다. 은찬스승님께 배운부분을 다시 한번 작성해보면서 공부를하니 확실히 이해가 잘되었고, 코드가 작동되는 순서를 어느정도 이해할 수 있었다. 그리고 코드를 작성하면서도 오류가 나는 부분들이 있었는데 그런 부분들을 내가 찾아보며 오류를 해결해보니 확실히 머릿속에 기억도 훨씬 잘 남는것 같다. 물론 앞으로도 더 많은 오류를 경험하게 될테고 오늘 해결한 오류를 또 경험하게 될테지만 그때마다 잘해결해 나가며 성장의 발판으로 삼을수 있도록 해야겠다. 내일의 수업을 위해서 오늘은 이만 쉬도록 하겠다.