React - JSX , component의 props와 state 알아보기

기본 문법

import React, { Component, Fragment } from 'react'; // 리액트 모듈을 불러와 사용하겠다~

class App extends Component {
  render() {
    return (
        <h1>안녕하세요 리액트</h1> 
    );
  }
}

export default App;

import React, { Component, Fragment } from 'react'; // 리액트 모듈을 불러와 사용하겠다~

class App extends Component {
  render() {
    const name = 'hyejin !';
    const value = 1;
    return (
      <>
        <div>hello {name}</div>
        {/* 조건부 렌더링 */}
        { 1+1 === 2 ? '맞음':'틀림'} 
        { 
          (()=>{   // === (function(){
            if(value ===1) return <div>1이다!</div>
            if(value ===2) return <div>2이다!</div>
            if(value ===3) return <div>3이다!</div>
            return <div>없다</div>
          })() // 즉시호출
        }
      </>
    );
  }
}

export default App;

JSX

• Javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법
• 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.
• v16.2 이상부터는 불필요한 엘리먼트로 감싸지않고, Fragment라는 것으로 사용하면된다.
• 주석 : {/* 내용 */}
• 참고사이트

JSX style

import './App.css'; // 파일을 불러올때는 이렇게 사용

class App extends Component {
  render() {
    const aaa = {
      backgroundColor: 'black',
      color: '#fff',
      padding: '10px'
    };

    return <div style={aaa}>안녕하세요!</div>;
    return <div className="bbb">안녕하세요!</div>; // css에서 불러옴
  }
}

컴포넌트(Component)를 만드는 2가지 방법

1. 클래스 (기본적)
2. 함수

모든 컴포넌트는 render 라는 함수가 존재한다.

Props (=변수, 중요함) , 클래스형 컴포넌트

• 읽기 전용
• state, LifeCycle 기능이 빠져있음 (뒤에서 자세히)
• 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할때 사용됨
  ex) <Child value="value" /> 여기서 value === props

import React, { Component } from 'react';

class MyName extends Component {

  static defaultProps = {  // 1번 방법 (최신방법)
    name: '기본이름'
  } 
  render() {
    return (
      <div>안녕하세요~ 제 이름은 <b>{this.props.name}</b>입니다.</div>
    )
  }
}
// 1번 결과 : 안녕하세요~ 제 이름은 기본이름입니다.

MyName.defaultProps = {  //2번 방법
  name: 'hyejin'
};
// 2번 결과 : 안녕하세요~ 제 이름은 hyejin입니다.

export default MyName;

함수형 컴포넌트

• 간단하게 값을 받아올 때 만 사용(props)
• 초기 기능이 빠름, 불필요한 기능이 없어 메모리자원을 덜 사용함

import React from 'react';  // 함수형 컴포넌트는 , { Component } 생략가능

class MyName = ({ name }) => {
    return(
        <div>안녕하세요! 제 이름은 {name} 입니다.</div>
    )
};

MyName.defaulProps = {
    name: 'hyejin'
}

export default MyName;

비구조화 할당 문법 (참고사이트)

State

• 읽기 전용 + 변경가능
• 내부에서 변경 할 수 있고, 변경 할 때는 언제나 setState 라는 함수를 사용한다

class Counter extends Component {

    state = { number: 1 }

    // 화살표가 아닌 render와 같은 그냥 함수로 사용할 경우 this를 인식못함
    handleIncrease = () => {
        this.setState({  // 변화를 일으킬 때 setState 필수 사용! 
            number: this.state.number + 1
        })
    }

    handleDecrease = () => {
        this.setState({
            number: this.state.number - 1
        })
    }

    render() {
        return (
            <div>
                <h1>카운터</h1>
                <div>값: {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
            </div>
        );
    }
}