[Today I Learned] 12월 1주차 day3

요즘 리액트에 대해서 공부중이다. vue를 한창 열심히 할때가 있었지만 공백기가 있어서 그런지 컴포넌트화 해서 개발을 오랜만에 하려니까 많이 낯설고 어렵다 ㅠㅠ 역시 공부는 꾸준히 해야 했었다... 하지만 다시 감을 잡아가면서 차근차근 공부하고 있다!!

요즘 리액트 공부 하면서 기본기 다질겸 todolist를 구현을 하기로 했다. 깃허브를 뒤져가면서 깔끔하게 컴포넌트별로 잘 정리 되고 코드 재활용성도 높은 레포지토리가 있길래 그 코드를 활용해서 나만의 todolist를 구현 하였다.
직접 본인이 해도 좋지만, 고인물 프론트개발자분들의 코드를 하나하나 뜯어보면서 그 코드를 나만의 것으로 만드는걸 더 좋아한다, 항상 그래왔고 앞으로도 그럴것이다.
하여튼 todolist를 구현하면서 쓸데없이 반복되는 코드들을 줄이고 어떻게 쓰면 더 좋은코드인지를 공부하게 되었다.

그래서 오늘의 TIL은!?

todolist를 하면서 코드를 뜯어보면서 정말 유용했던 부분들을 정리할 것이다.
이거 외에도 많은데 그건 내 레포지토리를 찾아오길바란다

첫번째

useState훅을 사용해서 초기값을 변수에 담아서 재사용성을 높여봤다.

const initialState = { id: 0, title: "", body: "", isDone: false };

const [inputTodo, setInputTodo] = useState(initialState);  //초기값에 변수 할당

별거 아닌거같지만 매우 유용하다.

원래는 input태그에 값을 입력후 버튼을 클릭하면 input 태그 value값에 값이 남아버린다.
버튼을 클릭 후 value값이 다시 빈칸으로 될 수 있게 하려면

setInputTodo(initialState); // 초기값을 할당했던 변수를 활용해 빈칸으로 초기화 되게 했다.

두번째

form태그와 onSubmit핸들러를 통해 코드 활용도를 높였다.
기존 같으면 button태그에다가 onClick핸들러를 준 후 함수를 호출해서 구현 했겠지만,
버튼을 클릭해야만 함수 호출이 된다. 추가로 나는 엔터키를 누르면 함수 호출이 실행되고 싶다.
이럴때 form태그 로 꼭 한번 감싼 후 아래의 코드처럼 함수를 호출한다.

<form onSubmit={onSubmitHandler} className="form_container"> //onSubmit핸들러 호출
      <div className="input_container">
        <label>제목</label>
        <input
          type="text"
          name="title"
          onChange={onChangeHandler}
          value={inputTodo.title}
          required
        />
        <label>내용</label>
        <input
          className="text-input"
          type="text"
          name="body"
          onChange={onChangeHandler}
          value={inputTodo.body}
        />
      </div>
      <button>추가하기</button>
    </form>

이렇게 해서 enter키를 클릭을 하면 값이 저장될 수 있게 할 수 있다.
하지만 이대로 끝내면 안된다!!
왜냐하면 form 의 기능 중 submit을 하면 자동으로 페이지를 리랜더링(새로고침) 하는데 이걸 하면 정보가 다 날아가기 때문에 이를 방지하기 위해 함수 정의부 쪽에 event.preventDefault();를 사용한다.
밑에는 사용 예시이다!

  const onSubmitHandler = (event) => {
    event.preventDefault();
    setTodos([...todos, inputTodo]);
    setInputTodo(initialState); // input창을 빈칸으로!
  }; 

세번째

가장 이해하기 어려웠다. 하지만 매우 유용한 코드이다.

setInputTodo({ ...inputTodo, [name]: value, id: nextId.current }); 

// `[name] : value` 를 통해 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됩니다.

즉, 아래 코드에서 name="title", name="body"에서의 value 값들인 title,body가 [name] 자리에 온다는 뜻이다.

 <input
          type="text"
          name="title"
          onChange={onChangeHandler}
          value={inputTodo.title}
          required
        />
        <label>내용</label>
        <input
          className="text-input"
          type="text"
          name="body"
          onChange={onChangeHandler}
          value={inputTodo.body}
        />

저렇게 함으로써 console.log를 찍어보면 input속성에 onChange핸들러를 통해 각자 value값이 title과 body에 찍히는걸 볼 수 있다. 현업에서 많이 쓰인다고 하니 이방법은 꼭 기억해 놓기로 했다!

그외에

input태그에 required 속성을 사용하면 빈칸상태에서 값이 저장되는것을 막을수있다.

<input
          type="text"
          name="title"
          onChange={onChangeHandler}
          value={inputTodo.title}
          required
        />

여기까지 todolist를 구현하면서 많은 것들을 배웠고 또 각자 태그만의 고유속성들을 많이 알아낸 것 같다. 아직 공부 할게 많지만 이렇게 하나하나 배워갈수록 너무 뿌듯하다!