[React] style 적용 시 발생한 에러: The `style` prop expects a mapping from style properties to values, not a string.

 

| 에러 발생 과정

React에서 style object를 만들어서 컴포넌트 props로 전달하는 방법을 시도하고 있었다.

내가 원하는 조건일 경우 style object를 전달하려고 했을 때 해당 오류가 발생했다.

 

| 에러 코드

function Square({ value, onClick, style }) {
  return (
    <button className="square" onClick={onClick} style={style}>
      {value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    const isWinningIndex =
      this.props.winningIndex && this.props.winningIndex.indexOf(i) !== -1;
    const styleObj = {
      boxShadow: "0px 2px 8px 0px #FFC233",
      border: "2px solid black",
    };
    return (
      <Square
        key={i}
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
        style={isWinningIndex && styleObj}
      />
    );
  }
  ...

 

| 에러 해결 방법 1

1. 콘솔에 나와있던 에러처럼 JSX에서는 {}를 사용하여 JS를 표현하기 때문에 {}를 추가로 넣어주어야 한다.
2. Square의 button 태그 코드를 아래와 같이 수정하였다.

<button className="square" onClick={onClick} style={{ style }}>

에러는 사라졌지만 스타일이 적용되지 않았다.

 

| 에러 해결 방법 2

조건을 없애고 실행해보니 아예 스타일이 적용되지 않는 것을 확인해볼 수 있었다.

style object를 전달한 props를 사용할 때는 JS 코드를 표현하는 것이 아니므로, 중괄호가 필요없었다.

 

isWinningIndex && styleObj 에서 &&를 사용했을 때 isWinningIndex가 truthy인 경우에는

Square의 button 태그 style 속성에 styleObj가 전달되지만, isWinningIndex가 fasly인 경우에는 false가 전달되어 오류가 발생한듯 하다. (정확하진 않지만, style에 false 값이 들어갈 수 없기 때문에 그렇게 생각했다.)

function Square({ value, onClick, style }) {
  return (
    <button className="square" onClick={onClick} style={style}>
      {value}
    </button>
  );
}

class Board extends React.Component {
  ...
    return (
      <Square
        key={i}
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
        style={isWinningIndex ? styleObj : null}
      />
    );
  }

style props에 isWinningIndex가 true 일 때는 styleObj를, 그렇지 않을 때는 null을 할당하였더니 에러를 잡을 수 있었다!👍