[ React ] 콘솔 경고들 수정하기

프로젝트 개발 중에 생긴 콘솔 경고들을 해결해 보았다.

 

경고 수정 #1

---

 

Form.Item을 사용하기 위해서는 Form 태그에 감싸주어야 한다.

Warning: Cant not find FormContext. Please make sure you wrap Field under From. 경고문에서 수정 힌트를 주니 좋다.

 

원래 코드

<Form.Item
    name={dataIndex}
    style={{
      margin: 0
    }}
    rules={[
      {
        required: true,
        message: `${title}을 입력하세요!`
      }
    ]}
    >
    {inputtype === 'ColorPicker' ? <ColorPicker defaultValue={record.color} onChangeComplete={color => setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null}
    {inputtype === 'ColorPicker' ? null : <Input defaultValue={record.name} onChange={e => setMeta(meta => ({ ...meta, name: e.target.value }))} />}
</Form.Item>

 

수정 코드

아래와 같이 Form 태그로 감싸주니 경고문이 없어졌다.

<Form>
   <Form.Item>
    ...
  </Form.Item>
 </Form>

 

 

경고 수정 #2 

---

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead. 

 

 

원래 defaultValue를 사용했는데 initialvalues로 변경하니 경고문이 없어졌다.

<Form.Item
    name={dataIndex}
    style={{
      margin: 0
    }}
    rules={[
      {
        required: true,
        message: `${title}을 입력하세요!`
      }
    ]}
  >
    {inputtype === 'ColorPicker' ? <ColorPicker initialvalues={record.color} onChangeComplete={color => setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null}
    {inputtype === 'ColorPicker' ? null : <Input initialvalues={record.name} onChange={e => setMeta(meta => ({ ...meta, name: e.target.value }))} />}
 </Form.Item>

 

 

경고 수정 #3

---

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

 

<a> 태그를 없애줌으로써 경고가 없어졌다.

 

원래 코드

<Typography.Link onClick={() => onCancel()}>
  <a>취소</a>
</Typography.Link>

 

 

수정 코드

<Typography.Link onClick={() => onCancel()}>
  취소
</Typography.Link>

 

 

 

경고 수정 #4

---

Warning: [antd: TextArea] `bordered` is deprecated. Please use `variant` instead. 

 

Ant design에서 Input.TextArea를 사용하였는데 이때 bordered={false}를 variant={false}로 하니 입력창에 border이 생겼다. border: 'none', outline: 'none'를 style에 추가해 줌으로써 input이 focus 되어도 border이 생기지 않게 해결하였다.

 

원래 코드

const TextAreaStyleProps = { resize: 'none', overflow: 'hidden'}
...

<Input.TextArea
  bordered={false}
  style={{ ...TextAreaStyleProps, ...style }}
  {...props}
/>

 

 

수정 코드

const TextAreaStyleProps = { resize: 'none', overflow: 'hidden', border: 'none', outline: 'none' }
...

<Input.TextArea
  variant={false}
  style={{ ...TextAreaStyleProps, ...style }}
  {...props}
/>

 

 

경고 수정 #5

---

Warning: Removing a style property during rerender (overflowX) when a conflicting property is set (overflow) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

 

 

 

원래 코드

 

아래 코드에서 overflow:'hidden'을 사용한 부분에서 경고를 날리고 있었다.

overflow를 사용할 경우 overflowX와 overflowY에 충돌이 나면 안 된다.

const TextAreaStyleProps = { resize: 'none', overflow:'hidden', border: 'none', outline: 'none' }

 

위 스타일을  아래 코드에서 적용해 사용하고 있었다.

...
} else if (type === 'textArea') {
    return (
      <FormFieldWrapper label={label} style={style} labelWidth={labelWidth} key={key}>
        <Input.TextArea
          style={{ ...TextAreaStyleProps, ...style }}
          onChange={({ target: { value } }) => props.onChange(value)}
        />
      </FormFieldWrapper>
    )
  }
  ...

 

수정 코드

 

막상 overflow:'hidden'이 필요가 없다는 것을 알고 지우니 경고가 없어졌다.

const TextAreaStyleProps = { resize: 'none', border: 'none', outline: 'none' }

 

 

 

경고 수정 #6

---

Each child in a list should have a unique "key" prop.

 

key값을 추가해 줌으로써 해결했다.

 

원래 코드

return (
    <Container id={scrollId} height={height}>
      <InfiniteScroll>
        {items.map(renderItem)}
      </InfiniteScroll>
    </Container>
  )

 

수정 코드

return (
    <Container id={scrollId} height={height}>
      <InfiniteScroll>
        {items.map((item, index) => (
          <div key={index}>{renderItem(item, index)}</div>
        ))}
      </InfiniteScroll>
    </Container>
  )

 

 

경고 수정 #7

---

Warning: Received `true` for a non-boolean attribute `bordered`.
If you want to write it to the DOM, pass a string instead: bordered="true" or bordered={value.toString()}.

 

bordered는 non-boolean 타입이기 때문에 bordered를 넘겨주기 전에 true or false인지를 확인하고 styled component로 넘겨주었다.

 

원래 코드

const FilterGroup = ({ ..., bordered}) => {
  return (
    <ListContainer bordered={bordered}>
      {title
        ? (
          <ListTitleContainer>
    ...

 

 

수정 코드

const FilterGroup = ({ ..., bordered}) => {
  return (
    <ListContainer bordered={bordered ? 'true' : 'false'}>
      {title
        ? (
          <ListTitleContainer>
    ...

 

 

경고 수정 #8

---

styled-components: it looks like an unknown prop "left" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.) 

 

styled-comoponent에 props로 데이터를 넘겨주면서 생겼던 오류다.  styled-comoponent v5.1부터는 props로 넘길 때$ 을 사용해서 props를 지정해 줄 수 있다.

 

임시 props라는 의미로 스타일을 위한 컴포넌트에 props를 전달하고, HTML 태그에는 영향을 주지 않기 위해서 사용된다.

styled-components는 스타일링을 만들기 위해 정의하는 태그이므로 props로 넘겨줄 값 앞에 $기호를 붙여주어 해당 props가 DOM요소로 전달되지 않게 방지해준다.

 

원래 코드

const BoxNameContainer = styled.div`
  position: relative;
  left: ${props => props.left || undefined};
  ...
`
const BoxText = styled.div`
  font-size: 15px;
`

export const BoxName = ({ title, children, left }) => {
  return (
    <BoxNameContainer left={left}>
      {title === '필터' ? <FilterOutlined /> : <GatewayOutlined />}
      <BoxText>{title}</BoxText>
    </BoxNameContainer>
  )
}

 

 

수정 코드

 

left={left} 앞에 $을 붙여주었다. 그리고 BoxNameContainer styled component 안에 props.left를 props.$left로 변경해주었다.

const BoxNameContainer = styled.div`
  position: relative;
  left: ${props => props.$left || undefined};
  ...
`
const BoxText = styled.div`
  font-size: 15px;
`

export const BoxName = ({ title, children, left }) => {
  return (
    <BoxNameContainer $left={left}>
      {title === '필터' ? <FilterOutlined /> : <GatewayOutlined />}
      <BoxText>{title}</BoxText>
    </BoxNameContainer>
  )
}