2 분 소요

Props

props 는 properties 의 줄임말입니다. React에서 props는 Immutable Data입니다. 즉 변하지 않는 데이터입니다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용합니다.

문법

class 컴포넌트와 function 컴포넌트가 있습니다. class와 function 비교 먼저 기본적인 문법입니다.

class, function 컴포넌트에서 props를 가져오는 방법

  • App.js 입니다.
// App.js
import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <>
      <HelloClass name="준혁" />
      <HelloFunction name="리사" />
    </>
  );
}

export default App;

class 컴포넌트입니다.

this.props.xxx 의 형태로 값을 가져옵니다.

// App.js
class HelloClass extends React.Component {
  render() {
    return (
      <div className="container">
        <p>Hello: {this.props.name}</p>
      </div>
    );
  }
}

function 컴포넌트입니다.

리액트가 호출할 때 전달된 props 라는 값을 호출하도록 약속이 되어있습니다.

function HelloFunction(props) {
  return (
    <div className="container">
      <p> Hello: {props.name}</p>
    </div>
  );
}

두가지 방법의 출력값입니다.

state

먼저 state는 초기값 설정은 필수입니다. (React.js 16.8부터 함수형 컴포넌트에서도 state를 사용할 수 있는데요. 이 때에는 useState 훅을 사용합니다.)

state는 컴포넌트 내부에서 변경될 수 있는 값입니다. props는 부모 컴포넌트가 설정하고 컴포넌트 자신은 props를 바꾸지 못하는 특성이 있는 것과는 차이가 있습니다.

props와 다르게 state 값을 변결할때 state를 직접 조작해서는 안됩니다. 변경이 필요할시 setState메소드를 사용합니다.

문법

class 컴포넌트 state 사용방법

카운터 app을 만들어보겠습니다.

  • App.js 입니다.
import React from "react";
import Counter from "./Counter";

function App() {
  return (
    <>
      <Counter />
    </>
  );
}

export default App;
  • Counter.js 입니다.
import React, { Component } from "react";

class Counter extends React.Component {
  state = {
    number: 0,
  };

  handleIncrease = () => {
    this.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>
    );
  }
}

export default Counter;

우선 state를 정의해줍니다. 객체여야합니다. 그 후 <div> 값:{}에 초기값인 state를 넣어줍니다. <div>값:{this.state.number}</div>

커스텀 메소드가 없기때문에 +를 눌도 반응하지 않습니다. 커스텀 메소드를 만들어 주도록 하겠습니다.. handleIncrease = () => {}; handleDecrease = () => {}; 메소드에는 setState를 사용하여 메소드를 작성해줍니다.

그리고 button에 onClick을 이용하여 메소드를 실행시켜줍니다.

여기서 중요한점은 메소드가 에로우 함수 인점입니다. 만약 handleIncrease(){}로작성한다면 추가적으로

  constructor(props) {
  super(props);
  this.handleIncrease = this.handleIncrease.bind(this);
}

위 코드와 같이 작성해주셔야합니다.

function 컴포넌트 state 사용방법

함수 컴포넌트 state 사용법은 지난글을 링크했습니다. 함수 컴포넌트 state, useState

defaultProps

실수로 props 를 빠트리거나 혹은 특정 상황에 props 를 일부러 비워야 할 때도 있습니다. 그러한 경우에는 props 의 기본값을 defaultProps를 이용하여 설정해줄 수 있습니다.

문법

기본적인 문법은 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 됩니다.

Hello.js

import React from "react";

function Hello({ color, name }) {
  return <div> Hello {name} </div>;
}

Hello.defaultProps = {
  name: "이름없음",
};

export default Hello;

App.js

import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <>
      <Hello name="준혁" />
      <Hello />
    </>
  );
}

export default App;

위의 코드의 값을보면 “Hello 준혁 Hello 이름없음” 이렇게 출력 되는걸 확인할수 있습니다.

댓글남기기

참고

최대 1 분 소요