프로젝트 TIL (4) - [ 디버깅의 중요성 & 함수형 프로그래밍의 중요성 ]

 

오늘 한 일 😒

 

 

input 태그를 사용할 때 주의할 점을 평소에 잘 알고 있다고 생각했었고 또 많은 input 태그를 다뤄보았음에도 불구하고 왜 이런 실수를 했는지 자괴감이 들었습니다......

 

시작하기에 앞서 제가 구현하고자 했던 로직은 다음과 같습니다.

 

• 유저가 독후감 작성하기를 클릭하여 WriteReport 페이지에 오면 기존에 있던 독후감 보여주기
• 기존에 있던 독후감을 수정버튼을 통해 수정할 수 있다.
• 수정버튼을 누르면 기존에 있던 value값에 입력하고자 하는 value 값을 더해서 수정할 수 있다.

 

이 로직을 수행하기 위해서 input 속성 중 readOnly라는 속성을 사용하게 되었습니다.

readOnly 속성은 input값이 읽기 전용인지 아닌지를 boolean 값으로 판단하는 속성입니다. 

수정 버튼을 클릭하면 input에 있는 readOnly 속성을 true(읽기전용)에서 false로 바꿔줌으로써 input 값을 수정할 수 있게 됩니다.

 

 

먼저 기존에 있던 독후감 글을 불러와 input창에 보여주기 위해 placeholder 속성에 이 독후감 글을 넣어주었습니다.

<input
  type="text"
  placeholder={reportList.reportMemo}
  readOnly={clickReportModified}
/>

 

그리고 수정 버튼을 클릭하게 되면 해당 input의 placeholder 값을 가져와 input.value에 할당하는 방식을 사용하였으나 이 방법을 사용하니까 수정하고자 하는 input태그의 value 값이 잘 들어오지 않는 현상을 겪게 되었습니다.

 

로직에도 문제가 있었지만 그것보다 기껏 readOnly 속성을 구글링하여 학습해놓고 placeholder에 기존 독후감 글을 보여주려고 하고 있으니 저는 input 태그의 readOnly속성을 제대로 활용하고 있지 못하고 있었습니다.

 

 

 

여기서 코드를 다음과 같이 변경하게 되면서 input의 value 속성을 지정하게 되는 두 번째 실수를 하게 됩니다.

<input
  type="text"
  value={reportList.reportMemo}
/>

 

value값에 등록되어 있던 독후감 글을 가져와 넣어주게 되었고 수정 버튼을 클릭하면 readOnly값을 false로 바꿔주면서 onchange 이벤트를 통해 수정하고자 하는 value값을 넣어주도록 로직을 변경하게 됩니다. 

 

 

---

 

결론적으로 저는 문제 해결을 위해 어디서 문제가 발생하였는지 디버깅을 하려고 하지 않았고 디버깅을 하지 않으니 어디서 문제가 발생한건지 제대로 파악하지도 못해서 엉뚱한 코드를 수정하고 알고있던 지식까지도 활용하지 못했습니다.

 

또한 하나의 함수에 모든 로직을 다 넣고 사용하려고 하니 가독성도 떨어지게 되었고, React는 함수형 프로그래밍의 철학을 받아 만들어진 라이브러리라는 것과 Hook을 사용하고 있음에도 불구하고 Hook의 함수형 프로그래밍 특징인 목적성( 알고리즘을 명시하는 것 보다 목표(함수)를 명시하는데 중심. ) 을 추구함에 탄생한 것임을 제대로 인지하지 못하고 사용하고 있었습니다.

 

---

 

 

 

해결 과정

 

 

먼저 input의 value 속성을 지정하면 input 값이 변경되지 않는다는 점부터 디버깅을 하기 시작했습니다.

const [input, setInput] = useState("");

useEffect(() => {
  setInput(reportList.reportMemo)
},[]);

const onChangeHandler = (e) => {
  setInput(e.target.value);
}

 

useEffect를 사용하여 input 값에 등록되어 있던 독후감 글을 넣어주어 렌더링 될 때 input의 value에 값이 들어갈 수 있도록 작성해주었고

onChangeHandler 함수를 선언하여 input에 onChange 이벤트가 일어날 때마다 setInput(e.target.value); 로 상태 값을 업데이트 해주고 있습니다.

 

<input
  type="text"
  value={input}
  onChange={(e) => onChangeHandler(e)}
  readOnly={clickReportModified}
/>

 

 

onChange 이벤트를 통해 들어오는 값을 담은 input을 value에 담아줌으로써 input 값이 변경될 때마다 화면에 보여질 수 있도록 설정이 완료되었습니다.

 

수정 완료 버튼을 누르면 이 input 상태 값을 가지고 부모 컴포넌트에서 Props로 내려준 함수에 전달인자로 값을 넣어주면서 서버에 독후감 수정 요청을 정상적으로 잘 보낼 수 있게 되었습니다.

 

 

 

---

 

마치며

 

위의 코드는 수정했던 코드의 일부를 가져와 적은 것이고 이 코드 외에도 여러 로직들이 있는데 왜 함수형 프로그래밍을 해야하는지 느낄 수 있었습니다.

함수를 선언할 때에는 그 함수가 어떠한 일을 하고 있는지 명확해야하고 확실하게 분리해주어야 합니다. 하나의 함수에 모든 로직을 다 넣게 되니 어디서 에러가 났는지 디버깅조차 시도할 수 없어서 많은 시간을 허비하고 엉뚱한 코드에서 삽질을 하게 되었습니다.

 

함수형 프로그래밍을 다시 한번 되짚어 생각하며 코드를 수정하고 나니 코드양도 반 이상으로 줄었고 가독성도 좋아지며 불필요한 로직도 제거할 수 있었습니다.

 

 

( 코드 한줄한줄 작성할 때마다 디버깅의 중요성과 함수 선언의 목적성을 생각하고 작성해야겠다는 깨달음을 얻어갈 수 있었던 시간이었습니다 😭)