JSX

24 Aug 2022 in Notes / Front-end / React

JSX의 기본 규칙

2022-08-24

• JSX : HTML같이 보이는 태그를 JS코드로 변환해줌 (tryout in Babel)
  • RULES TO FOLLOW
    1. ALL tags must be closed (either self-cloisng or closing tag)
    2. only return 1 TAG (div 또는 <></> (fragment)로 감싸주기)
    3. using JS variables or syntax within JSX : put it inside curly braces {}
    4. class X, className O
    5. inline CSS -> make const sytle in JS part, put it in inline CSS
    6. comment : { /* commented content */ }
  EXAMPLE

    // file: "App.js"
    import React from 'react';
  
    function App(){
      const name = 'hypnotes'
      const style = {
        background: 'purple',
      }
      return ( {/* JSX STARTS */}
        <div style = {style}>
          <div className = 'my-style'>
            {name}
          </div>
        </div>
      )
    }
  

• PROPS : send certain values to other components
  App.js

      // file: "App.js"
      import Hello from './Hello';
      function App(){
        return (
          <Hello name = "hypnotes" color="purple">
        )
      }
  

  1. props.PROPSNAME
     Example

        // file: "Hello.js"
        import Hello from './Hello';
             
        function Hello(props){  //use props.PROPSNAME
          return (
            return <div style = { props.color }>HELLO, { props.name }</div>
          )
        }
        export default Hello;
     

  2. { propsNAME} 비구조 할당
     Example

          // file: "Hello.js"
          import Hello from './Hello';
               
          function Hello( {name, color} ){  //use props.PROPSNAME
            return (
              return <div style = { color }>HELLO, { name }</div>
            )
          }
          export default Hello;
     

  • Default Props

    Hello.defaultProps = { name : '이름없음' };
    

• JSX :