[
  {
    "courseSlug": "react-intro",
    "question": "이 코스가 첫 섹션에서 소개하는 React의 핵심 아이디어를 한 줄로 나타낸 것은?",
    "option1": "화면(UI) = f(이벤트)",
    "option2": "상태 = f(화면)",
    "option3": "화면(UI) = f(상태)",
    "option4": "서버 = f(요청)",
    "answerIndex": 2,
    "explanation": "섹션 1의 핵심 문장은 '화면(UI) = f(상태)'입니다. 화면을 직접 조작하지 않고 상태가 이러면 화면은 이렇게 생겨야 한다고 선언하면, 상태가 바뀔 때 React가 바뀐 부분만 다시 그려 줍니다."
  },
  {
    "courseSlug": "react-intro",
    "question": "JSX에서 <h1>제목</h1><p>내용</p>처럼 형제 태그 두 개를 동시에 반환하려고 하면 에러가 난다. 코스에서 알려 주는 올바른 방법은?",
    "option1": "각 태그를 따옴표로 감싸 문자열로 반환한다",
    "option2": "<>...</> (Fragment)로 두 태그를 하나로 감싼다",
    "option3": "return 문을 태그마다 한 번씩 두 번 쓴다",
    "option4": "두 태그 사이에 쉼표를 넣어 나란히 반환한다",
    "answerIndex": 1,
    "explanation": "섹션 3의 JSX 필수 규칙 4번 — 형제 태그는 하나로 감싸야 하며, <>...</> (Fragment)로 포장하면 됩니다. 'Adjacent JSX elements must be wrapped...' 에러가 바로 이 규칙 위반의 신호입니다."
  },
  {
    "courseSlug": "react-intro",
    "question": "좋아요 버튼에서 setCount(count + 1) 대신 count = count + 1처럼 값을 직접 바꾸면 화면이 갱신되지 않는다. 코스가 설명하는 이유는?",
    "option1": "count가 부모에게서 받은 읽기 전용 props이기 때문",
    "option2": "state에는 문자열만 저장할 수 있고 숫자는 쓸 수 없기 때문",
    "option3": "브라우저가 폼의 기본 동작으로 새로고침을 막고 있기 때문",
    "option4": "setCount를 호출해야 React가 '다시 그리자'는 신호를 받기 때문",
    "answerIndex": 3,
    "explanation": "섹션 4에서 useState가 값을 바꾸는 함수를 따로 주는 이유는 딱 하나 — setCount를 불러야 React가 '상태가 바뀌었으니 화면을 다시 그리자'는 신호를 받기 때문입니다. 직접 바꾸면 React가 알아채지 못합니다."
  },
  {
    "courseSlug": "react-intro",
    "question": "코스가 '초보 함정 1위'로 꼽는 실수 — onClick={handleSubmit} 대신 onClick={handleSubmit()}처럼 괄호를 붙이면 어떤 일이 생기나?",
    "option1": "렌더링되는 순간 함수가 즉시 실행돼 버린다",
    "option2": "클릭할 때마다 함수가 두 번씩 실행된다",
    "option3": "함수가 등록되지 않아 클릭해도 아무 일이 없다",
    "option4": "이벤트가 부모 컴포넌트로 넘어가 버린다",
    "answerIndex": 0,
    "explanation": "섹션 5의 초보 함정 1위 — 괄호를 붙이면 '실행 결과'를 건네는 것이라 렌더링되는 순간 즉시 실행됩니다. 이벤트에는 괄호 없이 함수 그 자체를 건네야 '그때 실행해 줘'가 됩니다."
  },
  {
    "courseSlug": "react-intro",
    "question": "코스 목록을 .map()으로 그리면서 key={index}(자리 번호)를 썼더니, 항목 순서를 바꾸자 입력값이 엉뚱한 항목에 뒤섞였다. 코스의 '출석부' 비유에 따르면 올바른 해결책은?",
    "option1": "key를 아예 빼서 React가 자동으로 항목을 구분하게 둔다",
    "option2": ".map() 대신 반복문으로 목록을 하나씩 그린다",
    "option3": "DB가 준 고유한 id를 key로 넣어 '학번'으로 부르게 한다",
    "option4": "순서를 바꿀 때마다 목록 전체를 새로 만들어 갈아 끼운다",
    "answerIndex": 2,
    "explanation": "섹션 6의 비유 — key는 React의 출석부이며, 자리 번호(index)로 부르면 자리만 바뀌어도 헷갈립니다. 학번처럼 변하지 않는 고유 id를 key로 주면 순서가 바뀌어도 React가 각 항목을 정확히 알아봅니다."
  }
]
