[React] props 사용하기 #1

💡 Props 란?

react 에서 props 는 전역변수로, component 간에 값을 전달하는 수단이다. app.js (부모 컴포넌트)에서 다른 컴포넌트(자식 컴포넌트)로 어떠한 값을 전달할 때 props 객체에 담아서 보내게 되는 것이다.

1. React props 자료형 선언하기

자식 컴포넌트에서 props 에 대한 자료형을 선언해놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교해서 자료형이 일치하지 않으면 경고 메세지를 알려주기 때문에 잘못된 데이터를 확인할 수 있다.

1. App.js 수정하기

import './App.css';
import PropsDatatype from './R018_PropsDatatype';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <PropsDatatype
      String="react"
      Number={200}
      Boolean={1==1}
      Array={[0, 1, 8]}
      ObjectJson={{react:"리액트", twohundred:"200"}}
      Function={console.log("FunctionProps: function!")}
      />
    </div>
  );
}

export default App;

2. PropsDataType 파일 작성하기

import React, { Component } from 'react'
import datatype from 'prop-types';

class R018_PropsDatatype extends Component {
    render() {
        let {
            String, Number, Boolean, Array, ObjectJson, Function
        } = this.props;
        return (
            <div style={{padding: "0px"}}>
                <p>StringProps: {String}</p>
                <p>NumberProps: {Number}</p>
                <p>BooleanProps: {Boolean.toString()}</p>
                <p>ArrayProps: {Array.toString()}</p>
                <p>Object JsonProps: {JSON.stringify(ObjectJson)}</p>
                <p>FunctionProps: {Function}</p>
            </div>
        )
    }
}

// props 자료형 선언
R018_PropsDatatype.propTypes = {
    String: datatype.string,
    Number: datatype.number,
    Boolean: datatype.bool,
    Array: datatype.array,
    ObjectJson: datatype.object,
    Function: datatype.func,
}

export default R018_PropsDatatype;

만약 props type 선언과 입력되는 props 타입이 다를 경우에 warning 메세지가 콘솔에 뜬다.

2. React props 객체형으로 사용하기

1. App.js 수정하기

import './App.css';
import PropsBoolean from './R019_PropsBoolean';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <PropsBoolean BooleanTrueFalse={false} />
      <PropsBoolean BooleanTrueFalse />{/* default true */}
    </div>
  );
}

export default App;

2. Prop 파일 작성하기

import React, { Component } from 'react'

class R019_PropsBoolean extends Component {
    render() {
        let {
            BooleanTrueFalse
        } = this.props
        return (
            <div style={{padding: "0px"}}>
                {BooleanTrueFalse ? '2. ' : '1. '}
                {BooleanTrueFalse.toString()}
            </div>
        )
    }
}

export default R019_PropsBoolean;

3. 웹 실행

🐳 React 에서 생명주기란?

Component의 생성, 변경, 소멸의 과정을 뜻한다.

컴포넌트 생성 과정 : render(), constructor(), getDerivedStateFormProps(), componentDidMount()

컴포넌트 변경 과정 : shouldComponentUpdate()

3. React 생명주기 함수 render() 사용하기 - 생성

1. App.js 수정하기

import './App.css';
import React, { Component } from 'react';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Bpp></Bpp>
      </div>
  );
}

class Bpp extends Component {
  render() {
    console.log('3. render call');
    return (
      <h2>[THIS IS RENDER FUNCTION]</h2>
    );
  }
}

export default App;

render() 는 return 되는 html 형식의 코드를 화면에 그려주는 함수이다.
화면 내용이 변경되어야 할 시점에 자동으로 호출된다.

4. React 생명주기 함수 constructor(props) 사용하기 - 생성

1. App.js 작성하기

import './App.css';
import React, { Component } from 'react';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Bpp tiger="호랑이" lion="사자"></Bpp>  {/* Bpp 컴포넌트로 tiger, lion 변수 전달 */}
    </div>
  );
}

class Bpp extends Component {
  constructor(props){  // 생명주기 함수 중 가장 먼저 실행된다. 처음 한 번만 호출된다.
    super(props);
    this.state={};   // 변수 props 를 초기화할 때 사용
    console.log('1. Call');  // 첫 번째로 실행
  }
  render() {
    console.log(2, this.props.tiger);  // 두 번째로 실행
    console.log(3, this.props.lion);  // 세 번째로 실행
    return (
      <div></div>
    );
  }
}

export default App;

constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되고, 처음 한 번만 호출된다.

5. React 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기 - 생성

1. App.js 작성하기

import './App.css';
import React, { Component } from 'react';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Bpp prop_value='FromApp.js'/>
      </div>
  );
}

class Bpp extends Component {
  static getDerivedStateFromProps(props, state){
    console.log('2. getDerivedStateFromProps Call :'+props.prop_value);
    return {};
  }
  
  constructor(props){
    super(props);
    this.state={};
    console.log('1. constructor Call');
  }

  render() {
    console.log('3. render call');
    return (
      <h2>[THIS IS RENDER FUNCTION]</h2>
    );
  }
}

export default App;

App function 에서 prop_value 를 Bpp 컴포넌트로 전달한다.
Bpp 컴포넌트에서 getDerivedStateFromProps() 함수가 constructor() 함수 다음으로 실행된다.
컴포넌트가 새로운 props 를 받게 되었을 때 state 를 변경해준다.
props.prop_value 로 App function 에서 전달한 prop_value 변수에 접근해서 값을 가져올 수 있다.

6. React 생명주기 함수 componentDidMount() 사용하기 - 생성

1. App.js 작성하기

import './App.css';
import React, { Component } from 'react';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Bpp prop_value='FromApp.js'/>
      </div>
  );
}

class Bpp extends Component {
  static getDerivedStateFromProps(props, state){
    console.log('2. getDerivedStateFromProps Call :'+props.prop_value);
    return {tmp_state:props.prop_value};
  }
  
  constructor(props){
    super(props);
    this.state={};
    console.log('1. constructor Call');
  }

  componentDidMount(){
    console.log('4. componentDidMount Call');
    console.log('5. tmp_state: '+this.state.tmp_state);
  }
  
  render() {
    console.log('3. render call');
    return (
      <h2>[THIS IS COMPONENTDIDMOUNT FUNCTION]</h2>
    );
  }
}

export default App;

componentDidMount() 함수는 생성 단계의 생명주기 함수 중 (작성한 함수들 중) 가장 마지막으로 실행된다.
render() 함수가 return 되는 html 형식의 코드를 화면에 그려준 후 실행되며, 화면이 모두 그려진 후에 실행되어야 하는 이벤트 처리나 초기화 등에 가장 많이 활용되는 함수이다.

7. React 생명주기 함수 shouldComponentUpdate() 사용하기 - 변경

1. App.js 작성하기

import './App.css';
import React, { Component } from 'react';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Bpp prop_value='FromApp.js'/>
      </div>
  );
}

class Bpp extends Component {
  static getDerivedStateFromProps(props, state){
    console.log('2. getDerivedStateFromProps Call :'+props.prop_value);
    return {tmp_state:props.prop_value};
  }
  constructor(props){
    super(props);
    this.state={};
    console.log('1. constructor Call');
  }

  componentDidMount(){
    console.log('4. componentDidMount Call');
    console.log('5. tmp_state: '+this.state.tmp_state);
    this.setState({tmp_state2 : true});
  }

  shouldComponentUpdate(props, state){
    console.log('6. shouldComponentUpdate Call  / tmp_state2 = ' + state.tmp_state2);
    return state.tmp_state2;
  }

  render() {
    console.log('3. render call');
    return (
      <h2>[THIS IS shouldComponentUpdate FUNCTION]</h2>
    );
  }
}

export default App;

props, state 의 변경이 발생하면 변경 단계의 생명주기 함수인 shouldComponentUpdate() 가 실행된다.
setState() 함수로 tmp_state2 변수에 true 라는 boolean 타입의 데이터를 세팅했다.
setState() 함수는 변수의 선언과 초기화를 동시에 실행한다.
componentDidMount() 가 생성 단계의 생명주기 함수 중 가장 마지막으로 실행되는데 componentDidMount() 함수에서 tmp_state2 변수의 state 가 변경되었기 때문에 그 다음으로 변경 단계의 생명주기 함수인 shouldComponentUpdate() 가 실행된다.
shouldComponentUpdate() 가 실행되어서 boolean 유형의 데이터를 반환하고 return 값이 true 일 때 render() 함수를 한번 더 호출한다.
shouldComponentUpdate() 의 반환 값에 따라 render() 함수를 재실행할 수 있다. (리턴값이 false 일 경우 render() 재실행이 되지 않는다.)

*참고 : 본 포스팅은 도서 [초보자를 위한 리액트 200제] 로 공부하며 정리한 내용이다.

'JavaScript > React' 카테고리의 다른 글

[React] Redux 란? (0)	2021.10.21
[React] React 이벤트 사용하기 (0)	2021.10.20
[React] React 에서 bootstrap 사용하기(ReactStrap) (0)	2021.10.20
[React] HTTP 통신을 위한 방법 (Fetch, Axios, Promise) (0)	2021.10.20
[React] React.js 시작하기 (0)	2021.10.13

[React] props 사용하기 #1

💡 Props 란?

1. React props 자료형 선언하기

2. React props 객체형으로 사용하기

🐳 React 에서 생명주기란?

3. React 생명주기 함수 render() 사용하기 - 생성

4. React 생명주기 함수 constructor(props) 사용하기 - 생성

5. React 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기 - 생성

6. React 생명주기 함수 componentDidMount() 사용하기 - 생성

7. React 생명주기 함수 shouldComponentUpdate() 사용하기 - 변경

'JavaScript > React' 카테고리의 다른 글

댓글

티스토리툴바

[React] props 사용하기 #1

💡 Props 란?

1. React props 자료형 선언하기

2. React props 객체형으로 사용하기

🐳 React 에서 생명주기란?

3. React 생명주기 함수 render() 사용하기 - 생성

4. React 생명주기 함수 constructor(props) 사용하기 - 생성

5. React 생명주기 함수 static getDerivedStateFormProps(props, state) 사용하기 - 생성

6. React 생명주기 함수 componentDidMount() 사용하기 - 생성

7. React 생명주기 함수 shouldComponentUpdate() 사용하기 - 변경

'JavaScript > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바