‘React-bootstrap’에서 ‘ControlLabel’이 내보내지지 않는다는 오류를 어떻게 해결하는지 React에서 ‘ControlLabel’이 내보내지지 않는다는 오류를 수정하는 방법

리액트에서 ‘ControlLabel이 react-bootstrap에서 내보내지지 않는다’ 에러를 해결하는 방법

리액트에서 로그인 폼을 만들고 react-bootstrap 패키지를 활용하는 경우, ‘ControlLabel이 react-bootstrap에서 내보내지지 않는다’는 오류가 발생할 수 있습니다. 이는 귀찮은 문제일 수 있지만 걱정하지 마세요. 이 문제를 해결하기 위해 몇 가지 간단한 해결책이 있습니다. 이 블로그 포스트에서는 이 오류를 해결하고 로그인 폼을 원활하게 작동시키기 위한 다양한 방법을 알아보겠습니다.

해결책 1: ControlLabel 대신에 FormLabel을 사용해보세요

react-bootstrap의 최신 버전에서 ‘ControlLabel’ 구성 요소는 사용이 중지되었으며 ‘FormLabel’로 대체되었습니다. 따라서 최신 버전의 react-bootstrap을 사용하는 경우 코드에서 <ControlLabel>을 <FormLabel>로 간단히 바꿀 수 있습니다.

예시:

import { FormLabel } from 'react-bootstrap';

// ...

<FormLabel>이메일</FormLabel>

// ...

해결책 2: react-bootstrap 버전에 따라 Form.Label 또는 FormLabel 사용하기

사용 중인 react-bootstrap의 버전에 따라 <Form.Label> 또는 <FormLabel>을 사용해야 할 수 있습니다. 버전과 문서의 react-bootstrap 패키지를 확인하여 사용해야 할 요소를 결정하십시오.

예시:

import { Form, FormLabel } from 'react-bootstrap';

// ...

<Form.Group controlId="이메일" bsSize="large">
  <FormLabel>이메일</FormLabel>
  <Form.Control
    autoFocus
    type="email"
    value={this.state.email}
    onChange={this.handleChange}
  />
</Form.Group>

// ...

해결책 3: react-bootstrap 버전에 따라 코드 수정하기

특정 버전의 react-bootstrap을 사용하는 경우 코드를 해당 버전에 맞게 수정해야 할 수 있습니다. 예를 들어 이전 버전에서는 ‘Form.Group’ 대신 ‘FormGroup’ 구성 요소를 가져와야 할 수도 있고 ‘FormLabel’ 대신에 ‘ControlLabel’을 사용해야 할 수도 있습니다.

예시:

import { FormGroup, ControlLabel } from 'react-bootstrap';

// ...

<FormGroup controlId="이메일" bsSize="large">
  <ControlLabel>이메일</ControlLabel>
  <FormControl
    autoFocus
    type="email"
    value={this.state.email}
    onChange={this.handleChange}
  />
</FormGroup>

// ...

해결책 4: 호환되는 버전으로 react-bootstrap 재설치하기

위의 해결책 중 어느 하나도 동작하지 않는 경우, react-bootstrap의 호환되지 않는 버전을 설치한 것일 수 있습니다. 이 경우 기존 버전을 제거하고 호환되는 react-bootstrap 버전을 설치해 보십시오.

예시:

// 기존 react-bootstrap 버전 삭제하기
npm uninstall react-bootstrap

// 호환되는 react-bootstrap 버전 설치하기
npm install react-bootstrap@0.32.4 --save

위의 해결책을 따르면 ‘ControlLabel이 react-bootstrap에서 내보내지지 않는다’ 오류를 해결하여 문제 없이 로그인 폼을 구축할 수 있어야 합니다.

언제나 공식 react-bootstrap 문서를 참조하고 이 블로그 포스트의 코드 예시와 호환되는 react-bootstrap 버전을 사용하는지 확인하십시오. 즐거운 코딩하세요!

참고 자료 : 

reactjs