회원가입 코드 리팩토링

1. state 설정할 때에는 const로

// 리뷰반영전
  let [userName, setUserName] = useState("");
  let [userEmail, setUserEmail] = useState("");
  let [userPw, setUserPw] = useState("");

처음에는 let으로 작성했는데
나중에 새로 할당할 값이 아니기 때문에 const로 작성하면 된다

키워드 let 사용하는 경우
처음에는 무조건 키워드 const로 작성했다가 이후에 새로 값을 할당할 때 오류가 발생하면 그때 let으로 변경한다

// 리뷰반영후 
  const [userName, setUserName] = useState("");
  const [userEmail, setUserEmail] = useState("");
  const [userPw, setUserPw] = useState("");

2. API URL은 config.js 활용하기

// 리뷰반영전
fetch("http://10.58.7.101:8000/users/sign-up", {

// 리뷰 반영후
import { FLIX_URL } from "../../config";
fetch(`{API}/users/sign-up, {})

// config.js
export const FLIX_URL = "http://10.58.7.101:8000";

자주 변경되고 다양한 곳에서 쓰일 수 있는 ip 주소는 src/config.js 경로로 분리해서 활용하면 좋다

3. conclick 이벤트로 함수 호출할 때

arrow function 형태로 함수를 호출할거면
함수 자체를 넘겨줘도 결과는 동일하다

react에서 보기에는 이 방식이 더 간결하기 때문에 이렇게 작성하도록 하자

// 리뷰반영전
<Btn disabled={!check} onClick={() => handleBtn()}>

// 리뷰반영후
<Btn disabled={!check} onClick={handleBtn}>

⭐️ 4. 자식컴포넌트로 props.data 전달할 때 바로 구조분해할당 해주기

// 리뷰 반영 전

const SignUpInput = props => {
  const { name, title, type, validation, inputAlert, setName } = props.data; }

// 리뷰 반영 후 
const SignUpInput = ({ data }) => {
  const { name, title, type, validation, inputAlert, setName } = data; }

⚠️ 구조분해할당 하려면 이런방식으로 해야하나 고민 했는데
어떤 로직으로 바로 구조분해할당이 가능한지 알아봐야겠다

const { data } = props;
const SignUpInput = ({ data }) => {

5. 스타일링 너비/높이 지정하기

종택님 comment : container에 고정 높이 주지 마시고 자식 요소인 input 태그의 크기 + margin, padding으로 크기 잡아주시는게 좋습니다

// 페이지 레이아웃 구조
<InputContainer>
  <PlaceHolder>{title}</PlaceHolder>
  <Input name={name} type={type}
    onChange={e => setName(e.target.value)} />
  {validation && <InputAlert>{inputAlert}</InputAlert>}
</InputContainer>

// 리뷰반영전
const InputContainer = styled.div`
  height: 50px;
`;

const Input = styled.input`
  width: 100%;
  height: 30px;
`;

// 리뷰반영후
// InputContainer 높이 삭제

const Input = styled.input`
  width: 100%;
  height: 30px;
`;

const PlaceHolder = styled.span`
  display: block;
  height: 20px;
`;