unsupported-syntax

// ❌ 컴포넌트에서 eval 사용
function Component({ code }) {
  const result = eval(code); // 분석할 수 없음
  return <div>{result}</div>;
}

// ❌ with 문 사용
function Component() {
  with (Math) { // 동적으로 스코프 변경
    return <div>{sin(PI / 2)}</div>;
  }
}

// ❌ eval을 사용한 동적 프로퍼티 액세스
function Component({propName}) {
  const value = eval(`props.${propName}`);
  return <div>{value}</div>;
}

// ✅ 일반적인 프로퍼티 액세스 사용
function Component({propName, props}) {
  const value = props[propName]; // 분석 가능
  return <div>{value}</div>;
}

// ✅ 표준 Math 메서드 사용
function Component() {
  return <div>{Math.sin(Math.PI / 2)}</div>;
}

// ❌ 잘못된 예시: 컴포넌트에서 eval
function Calculator({expression}) {
  const result = eval(expression); // 안전하지 않고 최적화 불가능
  return <div>결과: {result}</div>;
}

// ✅ 더 나은 방법: 안전한 파서 사용
import {evaluate} from 'mathjs'; // 또는 유사한 라이브러리

function Calculator({expression}) {
  const [result, setResult] = useState(null);

  const calculate = () => {
    try {
      // 안전한 수학적 표현식 평가
      setResult(evaluate(expression));
    } catch (error) {
      setResult('잘못된 표현식');
    }
  };

  return (
    <div>
      <button onClick={calculate}>계산</button>
      {result && <div>결과: {result}</div>}
    </div>
  );
}