[TIL] form컴포넌트 손으로 작성하기

내배캠에서 과제를 받았는데 막막해졌다... 어떻게 시작해야 하는지 부터가 막막해져서 vsCode를 켜서 작성하지 말고 그림으로 그려보았닷..!!

어떤 디자인 / 어떤 기능 / 어떤 Data

어떤 디자인으로 만들지 어떤기능을 넣을지 어떤 데이타를 넣을지 구상이 중요하닷..!!

form컴포넌트 생각한 디자인 틀

일단 form컴포넌트를 구상을 그림으로 그렸다..ㅎㅎ

그린그림에 태그 넣기

각각의 그림에 어떤 태그를 넣을지 생각하면서 넣어야된다.(여기까지는 어렵지 않죠!!!)

어떤 기능인지 생각하기

• input value에는 닉네임의 input이랑 내용의 input이 들어갑니다. (이름도 딱! 알아보기 쉽게 작성해야한다) ex) nickNameInputValue, contextInputValue
• input이 하나 더있죠 chcekbox input value에는 ["서울","수원","대구","부산","제주도"] 이렇게 있을거 잖아요 그것도 상태값이 변경될것이니 state로 변경했습니다.

어떤 데이타 생각하기(말로 풀어서!!)

닉네임 인풋 + 내용 인풋 값이 들어가 있다고, 체크박스를 눌렀을때 다른 체크박스는 비활성화 되어야하고... 기본default값으로는 "서울"에 체크박스가 활성화되어있어야한다. 마지막 모든게 입력되어있으면 버튼을 클릭시 값을 저장된닷..!!

코드로 입력

그림으로 그리고 글로 써보았으니 이것들을 code로 작성을 해보았닷..!!

import React, { useState } from "react";

export default function Form() {
  const [nickNameInputValue, setNickNameInputValue] = useState("");
  const [contextInputValue, setContextInputValue] = useState("");

  const [checkedName, setCheckedName] = useState("서울");

  const regions = ["서울", "수원", "대전", "부산"];

  function makeChekBox(name) {
    return (
      <div>
        <input
          type="checkbox"
          checked={name === checkedName}
          onChange={() => {
            setCheckedName(name);
          }}
        />
        <label>{name}</label>
      </div>
    );
  }

  return (
    <form>
      <span>닉네임</span>
      <Input value={nickNameInputValue} setValue={setNickNameInputValue} />
      <span>내용</span>
      <Input value={contextInputValue} setValue={setContextInputValue} />
      {regions.map(makeChekBox)}
      <button>완료</button>
    </form>
  );
}

모두들 이렇게 코드먼저 짤지 생각말고 노트에 작성해보자

항상 과제를 받으면 너무 막막하다고 생각이 많이 드는데 오늘 그림으로 그려보면서 손으로 써보았더니 코드로 작성하는데 조금은 수월해졌지만.. 저렇게까지 생각하는데 많이 오래걸리는건 사실이지만 많이 작성하고 많이 그리고 많이 써본다면 익숙해져서 언젠가는 짧게 생각하고 코드로 작성할 수 있는 그날까지!! 연습을 많이 해봐야겠다..ㅎㅎ