1_props & state

출처: 리액트를 다루는 기술-VELOPERT

• 컴포넌트 생성 순서

파일 만들기 -> 초기 코드 작성하기 -> 모듈 내보내고 불러오기

코드:

MyComponent

import React, { Component } from 'react';
import PropTypes from 'prop-types';
​
class MyComponent extends Component { 
  render() {
    return (
      <div>
      야호
      </div>
    )
  }
}
export default MyComponent;
//다른 파일에서 이 파일을 import할 때,
//위쪽에서 선언한 MyComponent 클래스를 불러오도록 설정
//이 코드 작성 후, App 컴포넌트에서 MyComponent를 불러와 사용하면 됨.

App

import React, { Component } from 'react';
import './App.css';
import MyComponent from './MyComponent.js'; //MyComponent 파일을 불러옴
​
class App extends Component {
  render() {
    return (
      <MyComponent/>
    );
  }
}
​
export default App;

---

컴포넌트의 속성 값을 지닌 props와 상태값을 지닌 state

props

(=properties)

• props 값 설정 및 검증 순서

props 렌더링하기 -> props 값 설정하기 -> props 값 검증하기

그림과 코드, 코드 설명 추가하기

1. 역할: 컴포넌트의 속성을 설정할 때 사용됨.

2. 조건: 부모 컴포넌트만 설정할 수 있음, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있음, 렌더링은 {}안에서만

3. 디폴트 props 설정 방법 (두 가지-클래스 외부에 정의/클래스 내부에 정의) - props 값을 지정하지 않았을 때 기본 값으로 설정하는 defaultProps.

4. props 타입 지정 방법 -> propTypes (두 가지-클래스 외부에 정의/클래스 내부에 정의) , 컴포넌트의 필수props를 지정하거나 props타입을 지정할 때 propTypes 사용.

   문자열 종류 외의 값을 컴포넌트에 전달할 때는 {}로 감싸줘야 함.

5. 필수 props 설정 방법, 필수로 설정하게 해놓고 props값 설정안하면 오류 뜸

6. 여러 propTypes 종류

   • array

   • bool

   • func

   • number

   • object

   • string

   • symbol-es6 문법의 심벌 개체

   • node 렌더링할 수 있는 모든 것

   • element 리액트 요소

   • instanceOf()특정 클래스의 인스턴스

   • oneOf(,) 주어진 배열 요소 중 값 하나

   • oneOfType(,) 주어진 배열 안의 종류 중 하나

   • arrayOf() 주어진 종류로 구성된 배열

   • objectOf() 주어진 종류의 값을 가진 객체

   • shape(,) 주어진 스키마를 가진 객체

   • any 아무 종류

     -> 사용할 때는 PropTypes.bool , PropTypes.any.isRequired 같은 방식으로 사용

   ​

   코드:

   MyComponent

   
   import React, { Component } from 'react';
   import PropTypes from 'prop-types'; //propTypes 사용을 위한 import
   ​
   class MyComponent extends Component {
       //defaultProps를 클래스 내부에 정의하는 방법 
       
     //static defaultProps={
     //name:'기본 이름'
     //}
   ​
     //static defaultProps ={
     // name: PropTypes.string
     //}
       
       //propTypes를 클래스 내부에 정의하는 방법
       //static propTypes ={
       //name: PropTypes.string //name props 타입을 문자열로 설정한다. 
   //}
   ​
     constructor(props) {
       super(props);
       this.state={
         number:0
       }
     }
       
       //state를 constructor 밖으로 꺼낼 수도 있음
       //state={
     //number:0  
   //}
   ​
     render() {
       return (
         <div>
         새로운 컴포넌트. 첫 컴포넌트 ㅎㅎ
         내 이름은 {this.props.name}이다. //props를 렌더링할 때 {}안에 감싸주면 됨. 
                                       //this키워드를 사용하여 접근
         내 나이는 {this.props.age}이다.
         state를 통해 설정한 숫자는 {this.state.number}이다.
   ​
         <button onClick={() => {
           this.setState({
             number: this.state.number + 1
           })
         }
         }>더하기</button>
         </div>
       )
     }
   }
   ​
   //defaultProps를 클래스 외부에서 정의하는 방법 
   MyComponent.defaultProps={
     name: '기본 이름'
   }
   ​
   //propTypes를 클래스 외부에서 정의하는 방법
   MyComponent.propTypes={
     name: PropTypes.string, //name props 타입을 문자열로 설정한다. 
     age: PropTypes.number.isRequired //필수 propTypes 설정 부분. 필수적으로 존재해야 하며, 숫자이다.
   }
   ​
   export default MyComponent;
   //다른 파일에서 이 파일을 import할 때,
   //위쪽에서 선언한 MyComponent 클래스를 불러오도록 설정
   //이 코드 작성 후, App 컴포넌트에서 MyComponent를 불러와 사용하면 됨.
   ​

   App

   
   import React, { Component } from 'react';
   import './App.css';
   import MyComponent from './MyComponent.js'; //MyComponent 파일을 불러옴
   ​
   class App extends Component {
     render() {
       return (
         <MyComponent name="soojin" age={23}/> 
           {/*name 속성설정. props값 설정은 html 태그에 속성 설정하는 것과 비슷*, age는 필수 props값. age에 값 안넣으면 에러남/}
       );
     }
   }
   ​
   export default App;

   ​

   ​

---

state

• state 값 설정 및 업데이트 순서

  state 초깃값 설정하기 -> state렌더링하기 -> state 값 업데이트하기

그림과 코드, 코드 설명 추가하기

1. 역할: 컴포넌트 내부에서 읽고 또 업데이트할 수 있는 값을 사용하려면 state를 써야 함.

2. 조건: 기본값을 미리 설정해야 사용할 수 있음 -this.setState()메소드로만 값을 업데이트해야 함

3. state 초기값 설정하기 - 생성자 메소드인 constructor 내부에서 설정/ 외부에서 설정하는 방법.

   생성자 메소드는 컴포넌트를 새로 만들 때 실행된다.

   먼저 부모(Component)의 constructor 메소드를 호출해야함. 그래서 super 키워드 사용됨

4. state 값 업데이트하기 -setState()

5. 업데이트를 setState()메소드 안에서 하지 않을 경우

   setState()메소드의 역할: 파라미터로 전달받은 필드를 업데이트한 후, 컴포넌트가 리렌더링하도록 트리거함.

   만약, state에 직접 접근하여 업데이트한다면 컴포넌트를 자동으로 리렌더링 하지 않음. 이 때 this.forceUpdate()메소드로 강제 리렌더링할 수 있지만 비효율적이라 피하기!

   => state값을 업데이트할 때는 언제나 setState로만 업데이트해야 함.

코드:

MyComponent

import React, { Component } from 'react';
import PropTypes from 'prop-types'; //propTypes 사용을 위한 import
​
class MyComponent extends Component {
    //defaultProps를 클래스 내부에 정의하는 방법 
    
  //static defaultProps={
  //name:'기본 이름'
  //}
​
  //static defaultProps ={
  // name: PropTypes.string
  //}
    
    //propTypes를 클래스 내부에 정의하는 방법
    //static propTypes ={
    //name: PropTypes.string //name props 타입을 문자열로 설정한다. 
//}
​
  constructor(props) {//생성자 메소드. 컴포넌트 만들 때 props값 사용됨으로 props 메소드를 파라메터로
    super(props); //부모 클래스인 Component의 constructor를 먼저 호출해야하므로 super 사용
    this.state={
      number:0  //state의 초깃값 지정
    }
  }
    //state를 constructor 밖으로 꺼낼 수도 있음
    //state={
  //number:0  
//}
​
  render() {
    return (
      <div>
      새로운 컴포넌트. 첫 컴포넌트 ㅎㅎ
      내 이름은 {this.props.name}이다. //props를 렌더링할 때 {}안에 감싸주면 됨. 
                                    //this키워드를 사용하여 접근
      내 나이는 {this.props.age}이다.
      state를 통해 설정한 숫자는 {this.state.number}이다. //state 렌더링. props 렌더링 방법과 비슷
​
      <button onClick={() => {
        this.setState({ //state값 업데이트하기
          number: this.state.number + 1
        })
      }
      }>더하기</button>
      </div>
    )
  }
}
​
//defaultProps를 클래스 외부에서 정의하는 방법 
MyComponent.defaultProps={
  name: '기본 이름'
}
​
//propTypes를 클래스 외부에서 정의하는 방법
MyComponent.propTypes={
  name: PropTypes.string, //name props 타입을 문자열로 설정한다. 
  age: PropTypes.number.isRequired //필수 propTypes 설정 부분. 필수적으로 존재해야 하며, 숫자이다.
}
​
export default MyComponent;
//다른 파일에서 이 파일을 import할 때,
//위쪽에서 선언한 MyComponent 클래스를 불러오도록 설정
//이 코드 작성 후, App 컴포넌트에서 MyComponent를 불러와 사용하면 됨.
​

App

import React, { Component } from 'react';
import './App.css';
import MyComponent from './MyComponent.js'; //MyComponent 파일을 불러옴
​
class App extends Component {
  render() {
    return (
      <MyComponent name="soojin" age={23}/> 
        {/*name 속성설정. props값 설정은 html 태그에 속성 설정하는 것과 비슷*, age는 필수 props값. age에 값 안넣으면 에러남/}
    );
  }
}
​
export default App;

​