REACT 💬3

🎈 JSX 🎈

 

 

< App.jsx >

import React from 'react';

class App extends React.Component {
    render() {
    	return (
            <div>
            	Hello World!!!
            </div>
        );
    }
}

export default App;

 

🔧 JSX는 Html과 비슷하게 생겼지만 JSX를 작업할 때 몇가지 주의해야 할 것들이 있다.

  : Nested Elements, Attributes, JavaScript Expressions, Styling, Comments, Naming Convention

 

 

📌 Nested Elements

import React from 'react';

class App extends React.Component {
    render() {
    	return (
            <div>
            	<h1>Header</h1>
                <h2>Content</h2>
                <p>This is the content!!!</p>
            </div>
        );
    }
}

export default App;

: 더 많은 요소를 return하고 싶다면, 하나의 container로 묶어야 한다.

 

 

📌 Attributes

import React from 'react';

class App extends React.Component {
    render() {
    	return (
            <div>
            	<h1>Header</h1>
                <h2>Content</h2>
                <p data-myattribute = "somevalue">This is the content!!!</p>
            </div>
        );
    }
}

export default App;

: custom된 속성을 기본적인 HTML 요소와 속성에 사용 할 수 있다.

: custom 된 속성을 추가할 때 'data-'의 접두어를 사용해야한다.

 

 

📌 JavaScript Expressions

import React from 'react';

class App extends React.Component {
    render() {
    	return (
            <div>
            	<h1>{1+1}</h1>
            </div>
        );
    }
}

export default App;

: JavaScript 표현도 '{ }' 안에 넣기만 한다면, JSX 에서도 사용될 수 있다. 

 

import React from 'react';

class App extends React.Component {
    render() {
    	var i = 1;
    	return (
            <div>
            	<h1>{i == 1 ? 'True!' : 'False!'}</h1>
            </div>
        );
    }
}

export default App;

: 근데 if else 문은 못쓴다.... 대신 3항 연산자를 쓸 수 있다.

 

📌 Styling

import React from 'react';

class App extends React.Component {
    render() {
        var myStyle = {
            fontSize: 100,
            color: '#FF0000'
        }
        return (
            <div>
                <h1 style={myStyle}>Header</h1>
            </div>
        );
    }
}

export default App;

: React는 inline styles를 사용하는 것을 권장한다.

: inline style을 설정할 때, camelCase 문법을 사용한다.

: fontSize같은 숫자 뒤에는 React가 알아서 px를 붙인다.

 

 

 

📌 Comment

import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Header</h1>
                {//End of the line Comment....}
                {/*Multi line comment...*/}
             </div>
         );
    }
}

export default App;

: 주석은 한줄 : // , 여러줄 : /*      */

: React에서 주석처리를 할때 '{ }' 안에다가 넣어서 쓰는 것이 좋다.