리액트 공부 - 조건부 연산자 / 조건부 렌더링 / DOM 스타일링 / 모듈 import

*

조건부 연산자 

 

const condition = true;

    return(

      <div>

        {

          condition ? '참' : '거짓'

        }

 

*

조건부 렌더링 

 

    const condition = true;

    return(

      <div>

        {

          condition && ' 보여주세요 '

        }

      </div>

    );

 

이러면 false 일때는 값이 아예 안뜨고 참일 때만 ‘ 보여주세요 ’가 뜸 

 

*

DOM 요소 스타일링 

 

const style = {

      backgroundColor: 'gray',

      border: '1px solid black',

      height: Math.round(Math.random() * 300) + 50,

      width: Math.round(Math.random() * 300) + 50,

      WebkitTransition: 'all',

      MozTransition: 'all',

      msTransition: 'all'

    }

    return(

      <div>

        <h1>와우 </h1>

        <h2> 오와우우 </h2>

        <h3>{text}</h3>

        {

          condition ? '참' : '거짓'

        }

        {

          condition && ' 보여주세요 '

        }

        <div style={style}></div>

      </div>

    );

 

*

클래스 css 폴더에서 지원

 

import './App.css';

      <div className="my-div">

 

@App.css

 

.my-div{

  background-color:coral;

}

 

*
컴포넌트 생성하려면 

Src 우클릭 새파일 .js파일 생성 

rcc 입력하고 엔터치면 초기 코드 생성 

 

export default MyComponent;

 

이 코드는 다른 파일에서 이 파일을 import 할 때 위에서 선언한 MyComponent 클래스 불러올 수 있도록 설정 

 

*

모듈 불러오기 

 

MyComponent.js

import React, { Component } from 'react';

 

class MyComponent extends Component {

    render() {

        return (

            <div>

                나의 리액트 

            </div>

        );

    }

}

 

export default MyComponent;

 

App.js

import React, { Component } from 'react';

import MyComponent from './MyComponent';

 

class App extends Component {

  render() {

    return(

      <MyComponent/>

    );

  }

}

export default App;

 

 

이러면 MyComponent.js의 내용 그대로 가져와짐