export default function Counter(){

    function incrementCounterFunction(){
        console.log('increment Clicked')
    }

    return(
        <div className="Counter">
            <span className="count">0</span>
            <button className="counterButton" onClick={incrementCounterFunction}>+1</button>
        </div>
    )
}

• 이벤트를 추가할 때 onClick={incrementCounterFunction} 처럼 중괄호를 써줘야 한다.

CSS in JSX

1. 요소에서 바로 스타일 정의

    return(
           <div className="Counter">
               <span className="count">0</span>
               <button className="counterButton" 
                       onClick={incrementCounterFunction}
                       style={{fontSize:"100px"}}
                       >+1</button>
           </div>
       )

   • 중괄호를 두개 써줘야 함

2. 속성값을 별도의 스타일 객체로 선언

   export default function Counter(){
   
    
       function incrementCounterFunction(){
           console.log('increment Clicked')
       }
      
       return(
           <div className="Counter">
               <span className="count">0</span>
               <button className="counterButton" 
                       onClick={incrementCounterFunction}
                       style={buttonStyle}
                       >+1</button>
           </div>
       )

   1. 스타일 파일 생성

   
   .counterButton {
       font-size:30px;
       background-color:#18a5a5;
       width:100px;
       margin:10px;
       color:white;
       padding: 15px;
       border-radius: 30px;
       border-color: black;
       border-width: 5px;
   }
   
   .count {
       font-size: 150px;
       padding: 20 px;  
       color: rgb(12, 0, 0);
   };
   

   Counter.jsx

   import './Counter.css'
   export default function Counter(){
   
    
       function incrementCounterFunction(){
           console.log('increment Clicked')
       }
      
       return(
           <div className="Counter">
               <span className="count">0</span>
               <button className="counterButton" 
                       onClick={incrementCounterFunction}
                       >+1</button>
           </div>
       )

   • css 파일 임포트