Object Property Shorthand, textarea 태그 placeholder 줄바꿈 처리

Object Property Shorthand

서버에 데이터를 보내는 과정에서 특정 데이터값은 value를 작성하지 않아도 오류가 발생하지 않는 특징 발견

이전 react-hook-form 라이브러리를 이용하여 폼을 구성하면서도 발견했었음..!

ES6 문법으로 객체의 key와 value가 같다면, 생략하여 사용할 수 있는 문법

[예시]

• 기존 코드

	const [content, setContent] = useState<string>('');

    testRequest({
      testId: data.id,
      content: content,
    });

• ES6 Object Property Shorthand를 사용

	const [content, setContent] = useState<string>('');

    testRequest({
      testId: data.id,
      content,
    });

위와 같은 형식으로 content라는 것을 명확하게 제시해주는 것이 직관적이라고 판단했었기 때문에, 해당 문법을 잘 사용하지 않았었음

GPT 답변을 확인했을 때, 간결하고 현대적인 문법을 사용한 방식으로 권장된다고 한다.

현재 프로젝트를 구성하며, 코드 구성에서 문제를 찾는다면 서버에서 사용하는 key값과 클라이언트에서 사용하는 key값에 차이가 있다는 점이다.

위와 같은 현대적 문법을 사용하기 위해서는 각 엔드포인트에서 네이밍을 다르게 할 이유가 없다면 서버와 클라이언트의 네이밍을 그대로 가져가는 것이 직관적이고 에러 핸들링 면에서도 더욱 편리할 것으로 판단된다.

레거시 코드가 더욱 지저분해 보이는 이유 하나를 찾게 되었다.. ㅠ

---

textarea 태그 placeholder 줄바꿈 처리하기

현재 구성한 컴포넌트에서는 placeholder의 props를 string으로 받고 있어, \n을 string 자체로 받아들여 줄바꿈이 처리되지 않았다.

서칭을 통해 찾은 방법들과, 적용한 방법을 정리해보았다.

1. html에서 placeholder 줄바꿈 처리하기

<textarea id='test' placeholder="placeholder 내용입니다.&#13;&#10;&#13;&#10;(100자 내로 입력해주세요.)"></textarea>

현재 프로젝트의 프레임워크는 React 기반의 Next.js 였으며, JSX 문법에서는 위 내용이 제대로 적용되지 않았다.

2. useRef 사용해보기 (바보같은 방식;)

const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.setAttribute(
        'placeholder',
        '첫 번째 줄\n두 번째 줄\n세 번째 줄'
      );
    }
  }, []);

  return <textarea ref={textareaRef} />;

\n 값을 사용하고 싶어, 위와 같은 형식으로 구성해보았으나, 자체적으로 구성한 textarea component에 ref값이 props drilling 되는 것 뿐만 아니라, 리렌더링 이후에 잘 동작하지도 않았다.

3. 템플릿 리터럴(Template Literal) 사용

문득, 놓치고 있던 부분이 있었다. 백틱(`)을 이용하면 매우 편리하게 해결된다는 점;

	<MyMultilineTextField
        placeholder={`내용을 입력해주세요!\n(모시깽 모시깽 다양하게요~)`}
        value={content}
        onChange={onChangeContent}
        ...
    />

템플릿 리터럴은 ES6(ECMAScript 2015)에서 도입된 JavaScript 기능으로, 문자열을 보다 유연하게 작성할 수 있다는 점을 간과하고 있었다.

위와 같은 형식으로, placeholder에 넘겨줄 string을 괄호로 묶어, 객체 형태의 백틱 string으로 전달하면, 원하는 방식의 줄바꿈이 원활하게 이뤄진다.

ES6 문법에 대해서 간과하고 있던 하루였다.