React 메모장

kich555·2021년 9월 12일
0
post-thumbnail

Basic

import React, { Component } from 'react'; // react 모듈을 불러와서 사용하겠다!
		            	    // (react를 사용할땐 꼭 저렇게 import해줘야함)

class App extends Component { // Component를 만드는 방식은 총 2가지가 있다 Class/함수
  render() {  // render()에서는 꼭 JSX형태의 코드를 리턴해 줘야함
    return (
      <div>                        //이게 바로
        <h1>안녕하세요 리액트</h1>   //JSX
      </div>                      //Code!
    );
  }
}

export default App;  // 작성한 컴포넌트를 다른 곳에서 불러와서 사용 할 수 있도록 내보내기 해주기

JSX

JS로 변환되는 HTML


🔥tag는 꼭 닫혀 있어야함

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
      <input type="text"> // 이러면 아래와 같은 Error 
      </div>             // 꼮!  <input type="text"/> /로 닫아주기🔥🔥🔥🔥
    );
  }
}

export default App;

🔥2개 이상의 Element는 무조건 하나 이상의 Element로 감싸져 있어야함!!

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>상자1</div> //불가능!!
      <div>상자2</div> // 다른 ELement로 감싸줘🔥🔥
      
      <div>
      	<div>상자1</div> 
      	<div>상자2</div> // 편안..
      </div>
      
      
    );
  }
}

export default App;

🔥 Fragment있으면 괜찮아!!

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
      	<div>상자1</div> 
      	<div>상자2</div> // 편안..
      </Fragment>
    );
  }
}

export default App;
불필요한 상위 div가 없쥬?

🔥JSX 내부에서 JS 값 사용하기!

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const name = 'react'; // 변수 설정!!
    return (
      <div>
       <h1>hello {name}</h1>  //🔥🔥🔥 이렇게 {}로 감싸주면 사용 가능! 
      </div>
    );
  }
}

export default App;

🔥조건부 렌더링1

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const name = 'react'; // 변수 설정!!
    return (
      <div>
        {
          1 + 1 === 3
          ? '맞다'        // 🔥🔥조건문!
          : '틀리다'
        }
      </div>
    );
  }
}

🔥조건부 렌더링2 (삼항연산자)

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const name = 'react'; // 변수 설정!!
    return (
      <div>
        {
          name === 'react' && <div>리엑트다!!</div>
        }
      </div>
    );
  }
}

export default App;

🔥조건부 렌더링3 (화살표 함수)

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const value = 2; // 변수 설정!!
    return (
      <div>
        {
          (() => {
            if (value === 1) return <div>1이다!</div>
            if (value === 2) return <div>2이다!</div>
            if (value === 3) return <div>3이다!</div>
            return <div>없다</div>
          })()           // 🔥🔥즉시 실행 함수!
        }
      </div>
    );
  }
}

export default App;

🔥CSS 적용시키기!

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const style= {
      backgroundColor: 'purple', // 🔥🔥 '-'있던 style요소들은 camelCase로!!
      padding: '16px',
      color: 'yellow',
      fontSize: 30 + 6 + 'px'  // 🔥🔥 JS의 특징 그대로 사용 가능!
    }; // 변수 설정!!
    return (
      <div style={style}>  // 🔥🔥 중괄호로 JS값 불러오기!
        안냐세요!
      </div>
    );
  }
}

export default App;

🔥CLASS 적용하는 법!

import React, { Component, } from 'react';
import './App.css'     // 🔥🔥 Class 불러오기!
class App extends Component {
  render() {

    return (
      <div className="App"> // 🔥🔥 class 적용하기!
        안냐세요!
      </div>
    );
  }
}

export default App;

🔥주석 처리하는 법! (CLASS)

import React, { Component, } from 'react';
import './App.css'
class App extends Component {
  render() {
    return (
      <div>
      {/*🔥🔥🔥React에서는 이렇게 주석처리 할 슈 있어요*/}
      	<h1
      className="adfasdf" // 근데 또 이렇게는 됨 ㅋㅋㅋ??? >
        React!
      	</h1>
      </div>
    );
  }
}

export default App;
profile
const isInChallenge = true; const hasStrongWill = true; (() => { while (isInChallenge) { if(hasStrongWill) {return 'Success' } })();

0개의 댓글