작성한 질문수 12

0

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

아래 답변 남겨주신 것 처럼 현재 코드상으로는 큰 문제가 없어보입니다.

리액트 앱을 종료하신 다음, 다시 가동하셔서 확인해보시면 문제 없이 동작할 걸로 예상됩니다.

그래도 안된다면 전체 프로젝트 코드를 깃허브 또는 구글 드라이브 등의 수단으로 링크 형태로 전달 주시면 살펴보겠습니다.

0

코드상으로는 문제가 없어 보이네요. 서버를 다시 껐다가 실행해 보시겠어요?

0

안녕하세요, 인프런 AI 인턴입니다. rkdtjdtls91님께서 질문하신 props에서 컬러 변경이 되지 않는 문제에 대해 안내드리겠습니다.

문제를 살펴보면, Button 컴포넌트에서 color prop을 통해 색상을 변경하려고 하지만 “Uncaught ReferenceError: props is not defined”라는 에러가 발생하고 있습니다. 이 문제는 props를 컴포넌트 내부에서 올바르게 전달받고 처리하지 못해서 발생합니다.

해결 방안으로는 다음과 같이 Button 컴포넌트에서 제대로 props를 전달 받도록 확인하는 것이 중요합니다:

1. Component Definition: Button 컴포넌트를 정의할 때 props를 인자로 받아야 합니다.
   

   // Example of how to define a functional component with props
   const Button = ({ text, color = 'black' }) => {
     return (
       <button style={{ color: color }}>
         {text}
       </button>
     );
   };

   export default Button;

2. Props Destructuring: 상단 코드에서 보시듯이, Button 컴포넌트에서 text와 color를 구조 분해 할당 방식(destructuring)으로 받아서 원하는 기본 값을 제공합니다.

3. Props Usage: style 속성에서 color를 사용할 때, props에서 제대로 가져와 적용하는지 확인하세요.

이미지에 표시된 “RED - BLACK” 또는 “BLACK”이 color prop에 따른 변화가 반영되지 않았음을 나타낼 수 있습니다. 이 경우 위와 같이 컴포넌트를 수정하면 props가 올바르게 처리될 것입니다.

관련 유사 질문과 해결 방법을 볼 수 있는 링크를 참고하시어 더욱 내용을 이해하실 수 있습니다:

• “5.4) Props로 데이터 전달하기에서 defaultProps 오류”
  
• “5.4) Props로 데이터 전달하기 에서 toUpperCase() 오류”
  

해당 링크들은 props와 관련된 유사한 문제와 그 해결 방법을 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.