"개념 자체는 이해했다고 생각되어 넘어간 부분이어도 계속해서 까먹고 반복해서 같은 개념을 찾게 된다. 또한, 개념을 알고 있다고 느끼더라도 막상 실제로 코드를 분석/이해하려고 하면 어려움을 체감한다."

  	const title = titleInputRef.current.value;
    if (!title.trim()) return alert("제목을 입력해주세요");

위 코드를 이해하는 도중, !title.trim( ) 의 작동 방식이 완벽하게 이해되지 않아 이에 대해 알아보게 되었다.

trim( ) 함수란?

trim() 함수 는 문자열의 양 끝에서 공백을 제거한 새로운 문자열을 반환하는 함수

-> 문자열 중간의 공백은 유지되며 반환만 하기 때문에 원본 문자열은 바뀌지 않는다.

예시

var a = " 가 나 다 라 마 "
a.trim() // "가 나 다 라 마"

이와 같이 trim( )은 문자열의 맨 앞과 맨 뒤쪽의 공백을 제거하여 준다.

trimStart( )와 trimEnd( )

trim( ) 함수와 관련된 함수로는 trimStart( )와 trimEnd( )가 있다.

• trimStart() : 문자열의 시작부분에서 공백을 제거한 새로운 문자열을 반환하는 함수

• trimEnd() : 문자열의 끝부분에서 공백을 제거한 새로운 문자열을 반환하는 함수
  
  

코드 분석

전체 코드

  const onPressPushElement = () => {
    // input value? -- javascript? dom-api

    const title = titleInputRef.current.value;
    if (!title.trim()) return alert("제목을 입력해주세요");

    const existTitle = b.current.find((el) => el.title === title);
    if (existTitle) return alert("이미 존재하는 제목입니다");

    b.current.push({ title });
    console.log(b);

    titleInputRef.current.value = "";

    // 간단한 로직을 구상할 때도 기능의 완성을 생각하는 것이 아니라
    // 몽키테스트 --> 사용자는 무슨 짓을 할지 모르니까 마구 눌러본다
    // 사용자라 생각하고 발생할 수 있는 모든 경우의 수에 대해서 생각해보는 것이 좋다
  };

헷갈렸던 부분

    const title = titleInputRef.current.value;
    if (!title.trim()) return alert("제목을 입력해주세요");

이 코드는 제목 입력란이 공백으로만 채워져 있을 때 사용자에게 경고를 표시하고 함수의 실행을 중단하는 역할을 한다.

trim() 메서드는 문자열의 양쪽 끝에 있는 공백 문자를 제거한다.
!title.trim() 부분은 title 변수가 공백 문자만으로 이루어져 있는지를 확인하는 역할을 한다.

구체적인 설명

• titleInputRef.current.value로 입력된 제목을 가져옴.
• title.trim()을 호출하여 제목의 앞뒤 공백을 제거한 새로운 문자열 반환.
• !title.trim()은 이 문자열이 빈 문자열인지 아닌지를 확인.
  - if, title.trim()이 빈 문자열이라면, !title.trim()은 true
  - if, title.trim()이 빈 문자열이 아니라면, !title.trim()은 false

따라서 !title.trim()은 입력된 제목이 공백만으로 이루어져 있는지를 확인하는 조건으로, 만약 그렇다면 alert("제목을 입력해주세요")을 실행하여 사용자에게 제목을 입력하라는 경고 메시지를 보여준다.