리뷰이벤트(폭탄)

배민 리뷰이벤트보다 많이온 깃허브 리뷰... 명언을 하나 보면서 마음을 다스려본다..

나의실력을 인정하고 어떻게 발전해 나갈 것인가에 집중하기....메..모

하나의 스테이츠로 관리하기

const [idInput, setidInput] = useState('');
  const [pwInput, setpwInput] = useState('');
  const [nameInput, setnameInput] = useState('');
  const [phonenumberInput, setphonenumberInput] = useState('');
  const [addressInput, setaddressInput] = useState('');

이와같이 너무 똑같은 스테이츠들은 하나로 관리할 수 있는 굉장한 방법이 있다고해서 수소문중 성현 Kim 님께 다가가 슬쩍 물어보았다 저에게 영감을 주신후 유유히 떠나가셨지만 그녀의 말엔 일리가 있었고 뜻이 있었다.

const [inputs, setInputs] = useState({
    idInput: '',
    pwInput: '',
    numberInput: '',
    nameInput: '',
  });

  const { idInput, pwInput, numberInput, nameInput } = inputs;

프퀸(프론트 퀸)의 영감과 나의 재빠른 검색과 노션의 방향이 이런 코드를 짜게 만들었다 (짝짝짝) 이렇게 만든후 성현Kim 님께 스리슬쩍 다가가니 잘했다고 젤리를 하나 건냈다... 정중히 거절 후 기쁜마음을 숨긴 채 자리로 돌아갔다고 한다

그에따른 함수도 변경

  const handleidInput = e => {
    setidInput(e.target.value);
  };
  const handlepwInput = e => {
    setpwInput(e.target.value);
  };
  const handlenameInput = e => {
    setnameInput(e.target.value);
  };
  const handlephonenumberInput = e => {
    setphonenumberInput(e.target.value);
  };
  const handleaddressInput = e => {
    setaddressInput(e.target.value);
  };
  
  -----------------------------------------
  const handleInputs = event => {
    const { name, value } = event.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };
  
   <input
                className="inputPw"
                onChange={handleInputs}
                type="password"
                name="pwInput"
                value={pwInput}
              />

어때용 보기좋쵸? 이걸 바꾸는데 쉽지는 않았지만 해냈다능,. 노션의 힘을빌려 결국 해냈습니다 제가 짝짞쨕 어뜨케 어뜨케 하고있는 저를 본 소연Won 님께서 같이 도와주셔서 결국 해냈습니다 !!
<키포인트>
여기서 킹포인트 저기 name="pwInput"값을 안넣어주면 말짱도루묵이 됩니다. 꼭 name값을 줘야합니다!!

SCSS속성에도 급이 있다는 사실

  cursor: pointer;
      }
      .NomemberLogin {
        padding-top: 20px;
        width:505px

여기서 잘못된걸 한눈에 찾는다면 당신은 프론트 황제라고 지칭하겠습니다!!!!
SCSS 안에서도 순서를 맞춰줘야 합니다
1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)

이와같이 적용순서를 정해줘야합니다!!!

> 중복된 import 값 제거

import React from 'react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';

이것과 같은 React 는 중복된값을 지워야한답니다! 뭐가 중복이 되어있을까요ㅕ??? 다같이 10분간 생각해보고 밑에를 봅시당

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

요고죠~ React 값은 밑에서도 충분히 불러올 수 있기 때문에 중복된 값은 제거를 해야한답니다~!.

마무으리

마무으리 를 하며 프로젝트 기간에서도 내가 얼마나 배웠는지를 회고하며 다음번에는 같은실수를 안하겠다는 다짐을 또 하면서 이 글을 마치려고 한다 아마 다음주에도 리뷰가 많을 것 이니 구독과 댓글 알림설정까지 해주세용~

뿅