리액트 JSX 문법 및 props, PropType

JSX는 리액트에서만 사용가능한 자바스크립트 문법이다.

 

규칙

1. return 받는 컴포넌트들은 하나의 부모컴포넌트로 쌓여있어야함.

2. JS 문법을 사용하고 싶으면 {}를 치고 그 안에 사용해야함.

3. 템플릿 사용시 문법이 약간다름.

 

 

아래와 같이 2개 만들어봤다.

속성부여하는 법을 보자.

 

1. 부모 컴포넌트

class App extends Component{
  render() {
    
    return (
      <MyComponent/>
    );
  }
  
}


export default App;

2. 자식컴포넌트 

class MyComponent extends Component{
    
    render(){
        return (
            <div>
               내이름은 {this.props.name}이야. .{/*props사용시 this붙여야함. */}
            </div>
        )
    }
}

Props는 3가지 방법으로 컴포넌트에 속성을 부여할 수 있음. 부모컴포넌트가 설정하며, 자식은 해당 props를 읽기 전용으로 만 사용할 수 있음. 컴포넌트 내부에서 읽고 또 업데이트 할 수 있는 값을 쓰려면 state를 써야한다.

 

1. 부모컴포넌트에 name 속성줘서 직접입력하는 방법

class App extends Component{
  render() {
    
    return (
      <MyComponent name = "사쿠라"/>
    );
  }
  
}


export default App;

2. 자식컴포넌트 클래스 밖에 디폴트값 설정하는 방법.

class MyComponent extends Component{
    
    render(){
        return (
            <div>
               내이름은 {this.props.name}이야. .{/*props사용시 this붙여야함. */}
            </div>
        )
    }
}

MyComponent.defaultProps = {
    name : "사쿠라짱"
  }

3. 자식컴포넌트 클래스 안에 디폴트값 설정하는 방법

class MyComponent extends Component{
    static defaultProps = {
        name : '사스케'
    }
    render(){
        return (
            <div>
                내이름은 {this.props.name}이야. .{/*props사용시 this붙여야함. */}
            </div>
        )
    }
}

컴포넌트의 필수 Props을 지정하거나 props 타입을 지정할때는 propTypes를 사용해서 검증을 해줘야함.

사용할때는 상단에 아래와 같이 반드시 해준다.

import PropTypes from 'prop-types';

방법은 2, 3번방식과 동일하게 할수 있다.

 

필수 propTypes 설정은 뒤에 isRequired를  붙여주면 된다.  필수 설정하고 없으면 에러남.

 static propTypes = {
   name : PropTypes.string,
   age : PropTypes.number.isRequired
 }

propTypes의 종류는 매우 많다. 필요에 따라 검색해서 쓰자.