React 정리 #1

실습 #1

외부파일 import 시 import '' 사용
JavaScript 코드 영역과 JSX 문법 영역이 있다.
html에서는 단일 태그에서 /생략이 가능하나, JSX에서는 / 생략 불가
메인태그(<div> 등) 존재必

import React, { Component } from 'react'
// import 구문을 적어 외부 파일을 import
import './App.css'

export default class App extends Component {
  render() {
    // JavaScript 코드 영역
    console.log('적당한 문자열');
    const s = '문자열'
    const b = false
    // JSX 문법 영역 -> 여기가 <body> 구문이라고 보면 됨.
    // html + javascript의 코드 작성 가능
    return (
      // 반드시 return() 내에 메인태그가 무조건 한개이상은 존재해야함
      // html에서는 단일태그(<div/>)의 '/' 생략가능하지만, react에서는 생략 불가
      <div>
        <h1>{s}</h1>
        {
          // JSX : if else 문은 사용불가능하지만 삼항연산은 가능
          b ? '호랑이' : '코끼리'
        }
        <div className='st'>
          <h1>안녕</h1>
        </div>

        <h1>적당한 글자</h1> <br/>
        {/* 주석은 이렇게 잡는다 */}
        {/* <h1>적당한 글자</h1> */}
      </div>
    )
  }
}

실습 #2

함수 만드는 방법 세가지
1. f1() {}
2. f2 = function () {}
3. f3 = () => {}
render() 본문에서 메소드 사용법 → javascript를 사용하려면 {} 내에 명시

import React, { Component } from 'react'

export default class App extends Component {
  //함수 만드는 방법 세가지
  // 1
  // 앞에 function 붙이면 사용 X
  f1() { console.log('1'); }
  // 2
  f2 = function() { console.log('2'); }
  // 3
  f3 = () => { console.log('3'); }

  render() {
    return (
      <div>
        <button onClick={this.f1}>버튼1</button>
        <button onClick={this.f2}>버튼2</button>
        <button onClick={this.f3}>버튼3</button>
      </div>
    )
  }
}

실습 #3

컴포넌트 추가 방법
컴포넌트 불러오는 방식 : 단독 태그로 사용((ex) <Component1 />)
export default는 하나의 파일에 반드시 한개 존재해야하며, Only 한개만 존재해야 한다.

import React, { Component } from 'react'

//export default는 하나의 파일에 하나만 존재 & 반드시 존재
export default class App extends Component {

  render() {
    return (
      <div>
        호랑이
        {/* - 단독 태그로 사용 */}
        <Bpp/>
      </div>
    )
  }
}

// Component는 단독 태그처럼 사용할 수 있다.
class Bpp extends Component {

  render() {
    return (
      <div>
        독수리
      </div>
    )
  }
}

실습 #3

외부 js 파일을 import한 후, 태그로 불러 올 수 있다.

import React, { Component } from 'react'
// import 예제
import Bpp from './bpp'
import Cpp from './cpp'

export default class App extends Component {

  render() {
    return (
      <div>
        호랑이
        {/* - 단독 태그로 사용 */}
        <Bpp/>
        <Cpp/>
      </div>
    )
  }
}

실습 #4

부모 Component에서 던진 data를 받아올 때 this.props를 사용하여 받아온다.

// 하나의 파일에서 export default가 아닌 나머지 클래스는 'OOO, {...}' 라고 사용한다.
//React js에 여러개의 Class를 사용할 땐 {}를 사용.
import React, { Component, Fragment } from 'react';
// 외부 css 파일 import
import './App.css';
// 외부 js 파일 import
import Cpp from './Apple/cpp';

export default class App extends Component {

  render() {
    
    return (
      <div>
        <Fragment>
          // Bpp에 인수 전달
          <Bpp name='호랑이' age={27}></Bpp>
          <Cpp></Cpp>
        </Fragment>
      </div>
    );
  }
}

class Bpp extends Component {

  render() {

    return (
      <div>
        <Fragment>
          <h1>
            {this.props.name}
            {this.props.age}
            {console.log(typeof this.props.age)}
          </h1>
          고양이는 멍멍
        </Fragment>
      </div>
    );
  }
}

정리

무조건 return() 사이에 감쌀 수 있는 main tag(<div>)는 존재해야한다.
html에서는 단일태그(<div/>)의 / 생략가능하지만, react에서는 생략 불가
JSX 문법에서 if else문은 사용 불가능 하지만 삼항연산은 가능
함수명이나, 변수명을 참조할 때에는 무조건 this.를 붙여줘야한다.
console.log() 사용시 웹 브라우저의 ‘개발자도구 → Console’ 탭에서 확인 가능
```
{/* 주석은 이렇게 잡는다 */}
```
main파일을 제외한 나머지 파일들은 앞문자를 소문자로 사용하는게 개발자들만의 규칙 (하지만 class명은 앞글자 대문자 지키기)

React 정리 #1

실습 #1

실습 #2

실습 #3

실습 #3

실습 #4

정리

Share this post