💣 Uncaught ReferenceError: Component is not defined
예제 따라하는 중에 오류가 안 보이는데, 랜더링 했더니 빈화면이 나옴....
그래서 콘솔창을 확인해보니
Uncaught ReferenceError: Component is not defined
요런 오류가 나왔음!
👉 코드에서 Component를 제대로 정의하거나 가져오지 않았기 때문에 발생한 오류였음!
React 클래스 컴포넌트를 만들 때 React.Component를 상속받아야 하지만, Component를 사용하려면 React.Component에서 Component를 직접 구조 분해(destructuring)하여 가져와야 하는데, 그 부분이 누락된 거라고 함....
나는 1번 방법으로 수정함.
요렇게 수정해주고 랜더링!!!
근데, 또 이제 이런 문제가 생겼다지... 껄껄
onClick={() => {
console.log("왼쪽 마우스 클릭:", color); // 왼쪽 클릭 시 찍히는 값
// actions.setColor(color);
this.handleSetColor(color);
}}
onContextMenu={(e) => {
e.preventDefault(); // 마우스 오른쪽 버튼 클릭 시 기본 메뉴 방지
console.log("오른쪽 마우스 클릭:", color); // 오른쪽 클릭 시 찍히는 값
// actions.setSubColor(color);
this.handleSetSubColor(color);
}}원래는 주석처럼 actions.setColor(color)로 작성했었음. 이게 문제가 된 것임!!!
👉 React 클래스형 컴포넌트와 함수형 컴포넌트의 차이
👉 context 접근 방식의 일관성 문제
❓🤔 이 문제는 왜 발생했을까?
👉 클래스형 컴포넌트에서 context를 직접 사용하는 방식과 함수형 컴포넌트에서 useContext로 사용하는 방식이 다르기 때문이다.
actions.setColor(color)를 직접 호출하려면 함수형 컴포넌트처럼 useContext를 사용하거나, 클래스형 컴포넌트 내부에서 컨텍스트 참조를 명시적으로 설정해야 함!
📍 actions.setColor와 this.handleSetColor의 차이
- this.handleSetColor
- this.handleSetColor는 SelectColors 클래스 내부 메서드로 정의되어 있으며, this.context를 통해 ColorContext에 접근함.
- 해당 방식은 클래스형 컴포넌트에서 React가 권장하는 context 사용법
- 즉, this.context.actions.setColor를 내부에서 올바르게 호출하는 안전한 방법이라 할 수 있음!
- actions.setColor
- actions.setColor는 함수형 컴포넌트에서 주로 사용되는 방식
- 클래스형 컴포넌트에서 직접 actions를 사용하려면, this.context를 통해 접근해야 함. 그러나 actions.setColor(color)로 바로 호출한 경우, actions가 this.context에서 가져온 것이 아닌 상태일 수 있음.
- 즉, actions가 undefined거나 올바르게 초기화되지 않았을 가능성이 있음.
❓🤔 왜 this.handleSetColor(color)로는 작동했을까?
this.handleSetColor(color) 내부에서 this.context.actions.setColor(color)를 호출한다.
this.context는 React에서 클래스형 컴포넌트의 static contextType 설정을 통해 컨텍스트 값을 가져온다.
따라서 this.handleSetColor(color)는 컨텍스트를 올바르게 참조한 상태에서 동작하는 것이고,
반면 actions.setColor(color)는 클래스형 컴포넌트에서 직접 컨텍스트를 참조하지 않고 사용하려다 보니 참조가 끊겼거나 초기화되지 않은 상태일 가능성이 높은 것!
아무튼 이렇게 바꿔주니깐 렌더링 잘 됨!
this.handleSetColor(color);
