React 입문 개인과제

yarn 으로 리액트 실행하기

터미널에서 yarn create react app 폴더명

 

Vite로 만드는 방법

yarn create vite 폴더명 --template react -> cd 폴더명 -> yarn -> vs코드에서 yarn dev

 

컴포넌트 사용법

리턴 전 영역은 자바스크립트 리턴 아래부분은 html 코드같은 것을 입력

컴포넌트 만들때 첫글자 대문자, 폴더는 소문자시작

 

props는

반드시 위에서 아래로 [부모] -> [자식] 방향으로만 흐른다

부모에서 <Child name = {name} />

자식은 function Child(props){} props는 아무 이름이나 상관없다

 

children

 

state

use state 라는 hook을 사용

const [name, setName] = useState("내용");   import { useState }  위에 있어야 사용할수있음

setName("변경할 내용")

 

불변성 (변경이 불가하다)

원시데이터는 불변성이 있고, 객체, 배열, 함수는 불변성이 없다

 

오늘부터 리엑트로 개인과제를 진행한다

파리 올림픽 메달현황판을 한다!!!

이런식으로 만들어봤는데 input 박스도 키우고싶고 버튼들도 가로길이가 긴 직사각형으로 하고싶은데 안되는 부분들이 많다.. 얼른 외형적인걸 마치고 기능구현을 해야하는데 답답하다ㅏㅏㅏ

 const formStyle = {
    display: "flex",
    border: "1px solid #c3c3c3",
    borderRadius:"5px",
    alignContent:"center",
    justifyContent:"center",
    height:"40px",
  }
  
  return (
    <div style={mainStyle}>
    <form>
      <h1>2024 파리 올림픽</h1>
      <div style={subStyle}> 
      <div style={subStyle}>
      <div>국가명<input style={formStyle} type="text" /></div>

 

코드를 이런식으로 만들고있는데 이런식으로 하는게 Inline스타일링 이라고 하는 것 같다 React 컴포넌트에서 스타일을 직접 정의 하려면 이런식으로 한다

 

각자 하나씩 div 태그로 묶어야할지 어떻게 해야할지 감이 안잡힌다;;;;

 

const [country, setCountry] = useState("");
  const [gold, setGold] = useState(0);
  const [silver, setSilver] = useState(0);
  const [bronze, setBronze] = useState(0); // 입력값 담기

  const addMedalCounter = () => {
    const newMedals = {
      country: country,
      gold: gold,
      silver: silver,
      bronze: bronze,
    };
  };

input에 들어갈것들을 useState로 넣고 추가를 했다

<div>
              국가명
              <input
                onChange={(e) => setCountry(e.target.value)}
                style={formStyle}
                type="text"
              />
            </div>
            <div>
              금메달
              <input
                onChange={(e) => setGold(e.target.value)}
                value={gold}
                style={formStyle}
                type="number"
              />
            </div>
            <div>
              은메달
              <input
                onChange={(e) => setSilver(e.target.value)}
                value={silver}
                style={formStyle}
                type="number"
              />
            </div>
            <div>
              동메달
              <input
                onChange={(e) => setBronze(e.target.value)}
                value={bronze}
                style={formStyle}
                type="number"
              />
            </div>
          </div>
          <div style={subStyle}>
            <button onClick={addMedalCounter} type="submit" style={buttonStyle}>

일단 자세한건 모르겠지만 입문주차 강의를 보면서 차근차근 따라해나가고 있다!!!!!

다크모드를 따로 설정한건 아닌데 브라우저에서 알아서 바꼈다 의도치 않게 다크모드가 더 멋있는거 같네 ㅎ

위에 코드를 입력하니 숫자입력하는 부분에 초기값이 0으로 바꼈다.

오늘은  여기까지 해야겠다