23/11/08 til 리액트 숙련주차 (1)

import "./App.css";

import styled from "styled-components";  //yarn add styled-components 이거 터미널에 써서 다운로드 받은후 

                                                                  //임포트 해야 사용가능 

const Stcontain = styled.div`

  display: flex;                              // 요 변수를 태그명으로한 곳의 스타일을 변경가능

`;                                                 //근데 이거 변수명을 대문자로 써야함 왜 안되는지 한참갸우뚱함

const Styledbox = styled.div`     //이하동문

  width: 150px;

  height: 150px;

  border: 1px solid ${(props) => props.borderColor};  // 요거 대박 //이게 자식컴포넌트라서 대문자를 써야되나봄

  margin: 15px;                                           //딸라표시는 백틱안에 있어서 그런듯

  background-color: ${(props) => {

    return props.background;

  }};

`;

const bOxList = ["red", "blue", "green"];  // 이거는 컴포넌트가 아니라 소문자로 변수명써도 되는듯

const getboxname = (color) => {

  switch (color) {                           //스위치문 낯설다.

    case "red":

      return "빨강박스";

    case "green":

      return "초록박스";

    case "blue":

      return "파랑박스";

    default:

      return "검정박스";

  }

};

function App() {

  return (

    <Stcontain>

      {/* <Styledbox borderColor="red" background="green">

        {" "}

        빨강

      </Styledbox>

      <Styledbox borderColor="blue"> 파랑</Styledbox>

      <Styledbox borderColor="black"> 블랙</Styledbox> */}

      {bOxList.map((box) => {                                      //저 박스리스트를 맵으로 돌리는데

        return <Styledbox borderColor={box}>{getboxname(box)}</Styledbox>;

      })}                              //여기서 겟박스네임호출 인자로 box줘서 박스리스트의 요소들과 일치시킴

    </Stcontain>              //그리고 보더칼라는 자식컴포넌트로 프롭스 값을 준거임

  );

}

export default App;

//숙련 첫번째 강의 인데 어지럽네?

import "./App.css";

import styled from "styled-components";        // 버튼 누르면 넘버가 증가하는 로직

import { useState } from "react";

function App() {

  const [number, setnumber] = useState(0);

  return (

    <>

      <div>numberstate : {number}</div>

      <button

        onClick={() => {

          // setnumber(number+1)        // 이게 평소 쓰는 셋넘버 로직인데 온클릭한번에 셋넘버가 한번

          // setnumber(number+1)         //작동되서 1만 올라감 배치성이라서 그런다고함

          // setnumber(number+1)

          setnumber((currentnum) => currentnum + 1);   // 이건 함수형인데 현재 넘버를 인자로 받고

          setnumber((currentnum) => currentnum + 1);    //함수화한게 새로운 현재넘버가 됨

          setnumber((currentnum) => currentnum + 1);      // 요건 온클릭 한번으로 3이 올라감

        }}

      >

        누르면 증가

      </button>

    </>

  );

}

export default App;

그렇다고 함 하하

import "./App.css";

import styled from "styled-components";         // 유즈 이펙트

import { useEffect, useState } from "react";       // 유즈 스테이트를 사용해서 인풋태그에 값이 찍힐

                                                                        //때마다 셋밸류하게 설정

function App() {                                               // 그러면 인풋에 타이핑 할때마다 유즈이펙트도 리랜더링됨

  const [value, setvalue] = useState("");

  useEffect(() => {

    console.log("하하");                               //하하 가 콘솔로그로 계속찍힌다는말임

  }, []);                                                     // 유즈 이펙트는 함수를 갖게 하는데 이때 이함수 뒤에 콤마 대괄호

                                                             //를 멕이면 리랜더링되도 유즈 이펙트가 작동안됨

  useEffect(() => {                                   //대괄호 안에 값이 바뀔때 랜더링하라는 설정임

    console.log(`호호 : ${value}`);

  }, [value]);                                          //이렇게 하면 밸류가 바뀔때마다 작동하라는 설정임

                                                         //아래의 유즈이펙트는 인풋에 타이핑 할때마다 호호와밸류가 찍힘

  return (

    <>

      <input

        type="text"

        value={value}

        onChange={(e) => {

          setvalue(e.target.value);

        }}

      ></input>

    </>

  );

}

export default App;