[리액트]useState 코드 실행

✅ 'useState'는 리액트 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다

[코드예제]

import React, {useState} from 'react';

const Mycomponent = () => {
 const [const,setConst] =useState(0);
 
   return(
   
    <div>
    <p>현재 카운트 : {count}</p>
    <button onClick={() => setCount(count +1)}>카운트 증가</button>
    </div>
    
     );
    };

[코드 실행 시 오류 발생]

Compiled with problems:
×
ERROR in ./src/component/R07_State2.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\user1\react-workspace\tutorial-one\src\component\R07_State2.js: Identifier 'React' has already been declared. (2:7)

  1 | import React from "react";
> 2 | import React, {useState} from "react";
    |        ^
  3 |
  4 | const Mycomponent = () => {

 

[오류 원인]

-  상단에 useState를 선언해주지 않았다

-  파일이름 '예제2번'으로 변경 하였다

import React, {useState} from "react";

const 예제2번 = () => {
  const [count,setCount] = useState(0);

  return(
    <>
    <p>현재 카운트: {count}</p>
    <button onClick={() =>setCount(count+1)}>카운트증가</button>
    
    </>
  )
}
export default 예제2번;