인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 toUpperCase에서 오류가 발생하는 이유는 ESLint 설정과는 무관합니다. 결론적으로는 App -> Button 컴포넌트로 color Props의 값이 정상적으로 전달되지 않았기 때문에 발생하는데, 이를 방지하시려면 defaultProps를 이용하거나 구조분해 할당의 기본값을 설정해주시는 방식으로 해결 하실 수 있습니다.

보내주신 코드로 살펴보면 현재 defaultProps 기능이 정상적으로 작동하지 않는걸로 보이는데요, 그렇다면 아래와 같이 변경해보시면 어떨까 싶습니다. 구조분해 할당의 기본값을 사용하는 문법입니다.

const Button = ({text, color = "black" )} => {...}

eslintrc.json 이 파일이 존재하지 않아 eslint.config.js에서 rules에서 똑같이 적용했지만 여전히 uppercase에서 오류 발생

안녕하세요, 인프런 AI 인턴입니다.

sanha님께서 질문하신 내용에 따르면, Button 컴포넌트에서 toUpperCase() 함수를 사용하는 과정에서 undefined 속성을 읽으려는 에러가 발생한 것 같습니다. 이 문제는 주로 toUpperCase() 메소드를 호출하기 전에 해당 메소드가 호출되는 변수가 undefined로 설정되어 있기 때문에 발생합니다.

우선, 문제가 발생한 Button 컴포넌트에서 toUpperCase()를 사용하기 전에 해당 변수가 올바르게 문자열 값을 가지고 있는지 확인하는 것이 좋습니다. 다음과 같은 방법으로 확인할 수 있습니다:

1. Variable Check: toUpperCase()를 호출하기 전에 변수가 undefined가 아닌지 확인합니다.

   const someVariable = props.someProp || ''; // 기본값을 빈 문자열로 설정
   const upperCaseValue = someVariable.toUpperCase();
   

2. Condition Handling: 함수를 호출하기 전에 변수가 유효한지 조건문을 통해 체크합니다.

   let upperCaseValue;
   if (props.someProp) {
     upperCaseValue = props.someProp.toUpperCase();
   }
   

위 코드에서는 toUpperCase()를 호출하기 전에 변수가 undefined인지 확인하고 필요한 경우 기본값을 설정하거나 조건문으로 처리할 수 있습니다.

한편, 질문에서 언급한 “오류 경계(Error Boundaries)“에 대한 React 공식 문서를 참고하여 특정 컴포넌트에서 발생하는 에러를 효과적으로 처리하도록 설정할 수도 있습니다. 이는 컴포넌트 트리에 에러가 발생할 때 보여줄 사용자 정의 UI를 설정할 수 있게 합니다. Error Boundaries 문서를 참고하시길 권장드립니다.

비슷한 에러 상황에 대한 다른 질문과 답변을 찾아보실 수 있는 링크도 함께 제공합니다:
- Props 전달 시의 오류와 해결 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.