발견한 에러 ❌
가위바위보 기능에 사용할 코드 작성중
버튼 클릭시 무엇이 클릭 되었는지 판독하기위한 클릭 이벤트 핸들러 설정 함수에 인수로 문자열을 주었다.
클릭하기도 전에 이벤트 핸들러 설정이 잘 되어졌는지 확인도중
콘솔에 인수로 넣은 문자열이 출력되어진다.
리턴 부분에 UI를 그려질 때 함수를 인수를 생으로 호출하였기 때문
반환하는 부분을 보면 현재는 함수를 그대로 호출하는 것을 볼 수 있다.
절대로 함수를 그대로 호출하지말고 이렇게 함수를 콜백함수를 이용하여 호출하도록 한다.
의도한대로 클릭시에만 이벤트 핸들러가 정상적으로 동작한다.
발견한 에러 ❌
props로 받은 img 소스를 이미지 태그에 넣을 때 아무런 조치 없이 넣었다.
이미지 프로퍼티의 값이 정되어있지 않다면서 에러가 뜬다 왜?
당연하다 해당 이미지 props 값은 가위바위보 버튼중 하나를 눌러야지만 전달이 되어지기때문에
전달되어지지 않은 상태에서 렌더링부터 하려고 시도하였기 때문
&& 비교 연산자를 이용하여 사전에 가드를 조치한 후 렌더링 되어지도록 설정해줘야한다.
둘중 하나라도 null 이면 초기에 불러오려하지 않기 때문에 에러를 띄울 일이 없다.
사용자가 선택하기 전에 값이 설정되어있지 않은 값처럼
초기에 명확하게 정해진 값이 아니라면 반드시 이러한 가드를 설정해주어야 한다.
현재 누른 버튼에 해당되는 이미지가 잘 출력되어진다.
개발하는 곰🐻