삼항연산자와 useState 등을 활용해서 조건을 만족할 시에 버튼의 색깔을 바꾸는 코드를 짰는데, 버튼 색깔이 변경되지 않았다. console.log로 값을 찍어봐도 제대로 값을 들어오고 있었는데도 작동이 되지 않아서 무엇이 문제인지 막혀서 멘토님께 질문을 드렸고, 단순히 문제를 해결을 한 것이 아니라, 개발자라면 어떻게 사고를 해야하는지에 대해서 배워서 이 배움을 메모로 남긴다.
- 내가 그리고자 하는 그림이 무엇인지 생각하고, 그것이 최종 반영되는 곳을 가서 살펴본다.
<button
style={{ backgroundColor: {btnColorActive} }}
onClick={goToMain}
className="login_btn"
>
코드를 보니, 문법을 잘못 써줬다. {btnColorActive}가 아니라, btnColorActive으로 적어줘야지 변경된 state 값이 적용이 되는 것이었다.
- 그 다음에 최종 반영되는 곳에 문제가 없다면, 그 다음으로 내가 값을 조작할 수 있는 곳에 console.log를 찍어보고 값이 들어온다면, 내가 짠 코드가 잘 못된 것임을 생각하고, 어떤 부분까지가 맞고, 어디부터가 잘못되었는지를 파악한다.
const [btnColorActive, btnColorChange] = useState('#c0dffd');
function btnStatusChange(event) {
'#c0dffd';
btnColorChange(
idValue.includes['@'] && pwValue.length > 4 ? 'blue' : '#c0dffd'
);
}콘솔을 찍었을 때 값이 들어오는 것은 문제가 없었다. 문제가 있다면 내가 짠 코드 부분이 잘못된 것이었다.
먼저, 절대 틀릴 수가 없는 부분들을 구역을 나눠서 찾는다.
- 삼항연산자 문법이 틀렸는가?
- includes 문법이 틀렸는가?
- 길이를 구하는 문법이 틀렸는가?
- 색깔을 넣는것과 관련해서 틀렸는가?
우선, 색깔을 넣는 부분은 틀리지 않았다. 왜냐하면 그냥 값을 넣는 것이니깐, 그리고 삼항연산자 문법과 길이를 구하는 문법도 확인해보니 맞았다. 결국 남은 것은 includes 문법이었고, 그 부분이 틀렸었다.
idValue.includes['@']에서 []가 아닌, idValue.includes('@') 되었어야 올바른 문법이었다.
이 에러를 고치는 과정에서 중요한 것은 내가 문법을 올바르게 바르게 사용했냐는 것 뿐만이 아니라, 내가 에러 사항 등을 마주했을 때, 어떤 식으로 문제를 접근해야 하는지를 배울 수 있는 기회였다.
무작정 console.log를 여기저기 찍는 비효율적인 방식이 아니라,
우선, 내가 그리고자 하는 목표 지점(그리고자 하는 그림, 여기서는 button)에서부터 하나씩 짚어가면서, 절대 틀릴 수 없는 사실들(보통 컴퓨터 코딩 규칙 등)과 내가 틀릴 수 있는 부분들(내가 작성한 코드들)을 나누어가면서 하나씩 다시 체크해가면서 잘못된 부분을 찾는 것이 개발자적인 사고였다.
컴퓨터는 거짓말을 하지 않는다. 내가 코드를 잘못 작성한 것이다. 결국 절대 틀릴 수 없는 것들과 틀릴 수 있는 것들을 나누어서 구분하며 하나씩 하나씩 찬찬히 침착하게 들여다 보면서 에러를 해결해나가는 사고 훈련을 해야 한다.
