Props 사용 방법

Props와 State에 대해서 알아보도록 한다. Props와 State는 리액트에서 데이터를 다룰 때 사용되는 개념이다. 

간단하게 알아보자.

 

Props에 대해서 알아보면 Props는 부모컴포넌트가 자식컴포넌트한테 값을 전달할 때 사용된다.

나중에 컴포넌트를 만들게 되면 그걸 불러와서 사용할 수 있게 된다.<Child value="value />

 

그리고 어떤값을 컴포넌트 렌더링 할 때 전달해주고 싶다 그러면 땡땡땡 = 땡땡땡 식으로 넣어주게 된다.

이 과정에서 값을 넣어주는 것을 Props라고 부른다. 그래서 value가 하나의 Props인 것이다. 부모가 자식한테 넘겨주는 값이 바로 props 인것이다.

props

codesandbox에서 Myname.js이라는 새로운 컴포넌트를 만들어본다.

컴포넌트를 작성하면 import해서 컴포넌트를 불러오고 class 만들어주고 export까지 해준다.

import React, { Component } from 'react';

class MyName extends Component {

}

export default MyName;

모든 컴포넌트는 render()이라는 함수가 필요하다. render함수 만들고 render함수에서는 JSX를 return해줘야 한다.

div를 써서 넣어주고 싶은 문구를 작성한다. 여기서 어쩌고가 들어가는 부분에다가 props를 넣어준다.

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세여! 제 이름은 <b>어쩌고</b>입니다.
      </div>
    );
  }
}

props 값 전달

 아래와 같이 코드를 Counter.js에다 작성한다.

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세여! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

app 컴포넌트에 와서 보여주도록 하는데 import해서 MyName을 보여주고 MyName을 rendering해준다. 그러면 아래와 같이 나타나게 된다.

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

class App extends Component {
  render() {
    return <MyName name="리액트" />;
  }
}

export default App;

실수로 app컴포넌트에 name값을 실수로 빠뜨렸으면 MyName 컴포넌트에 디폴트 props를 이용해서 기본값을 적용한다. 그러면 아래와 같이 문구가 나온다. 그래서 defaultProps를 설정할 때는 static값을 class 내부에 설정하면 된다.

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

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

export default App;

import React, { Component } from 'react';

class MyName extends Component {
  static defaultProps = {
    name: '기본이름'
  };
  render() {
    return (
      <div>
        안녕하세여! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

export default MyName;

다른 방식은 아래와 같다. 위에서 했던 거랑 클래스 하단에서 하는거랑 완전히 같은 거다.

static으로 했던게 최신 JS문법이다. static으로 작성하고 나면 BABEL이 했던 코드를 변화하는 과정에서 아래로 내려준다.

결국은 같은 코드이다. 

class MyName extends Component {

  render() {
    return (
      <div>
        안녕하세여! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

MyName.defaultProps = {
  name: 'velopert'
};

그래서 기본값을 설정할 때는 static으로 사용한다. 그리고 컴포넌트를 만들때는 원래는 클래스를 사용해서 만드는데

함수형 컴포넌트라고 다른게 하나 있다. 

import React, { Component } from 'react';

class MyName extends Component {
  static defaultProps = {
    name: '기본이름'
  };
  render() {
    return (
      <div>
        안녕하세여! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

export default MyName;

 

함수형 컴포넌트는 단순히 props만 받아와서 보여주는 경우 위에서 처럼 기능이 없이 보여주기만 하는 경우에는 주로 함수형 컴포넌트를 작성한다. 함수형 컴포넌트는 아래코드와 같다. 밑에다가 아래같이default props를 넣어줄 수도 있다.

(코드 상단에서 컴포는트를 불러오지 않아도 된다.)

import React from 'react';

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

MyName.defaultProps = {
  name: 'velopert'
};

export default MyName;

그리고 리액트를 불러오는 코드는 유지한다. 내부적으로 JSX가 만들어질 때는 리액트를 사용하기 때문에 import 해주고 유지시켜준다. 위 코드에서 ({ name }) 문법은 비구조화 할당이다. 여기를 눌려 학습해보자.

 

예를 들어 아래코드가 있다하자.

const object = { a: 1, b: 2};

아래와 같은 작업을 해야 할 때가 있을 수도 있다.

const a = object.a; const b = object.b;

이러한 작업을 간단하게 해줄 수 있다. 

const { a, b } = object;

a
//1

b
//2

함수에서도 사용되는데 파라미터값({ }안에 있는거) 객체를 만들어서 작성해본다.

({ name: 'react', age: '몰라' }) 에서 전달해준 객체의 name값과 age값을 하나하나 추출해서 넣어주게 되는 것이다.

function sayHello({ name, age }) {
    console.log(name + '의 나이는' + age);
}
// undefined

sayHello({ name: 'react', age: '몰라' })
// react의 나이는몰라
// undefined

즉 아래 ({name})이 하나의 객체 파라미터인데 객체 내부에 있는 name값을 props로 받아와서 값을 {name}에서 사용하는 구조이다. ({name})이 props로 받아와서 {name}입니다.로rendering

import React, { Component } from 'react';

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

MyName.defaultProps = {
  name: 'velopert'
};

export default MyName;

함수형 컴포넌트와 클래스 컴포넌트의 주요 차이점은 함수형 컴포넌트는 state의 기능이 없고 lifecycle이라는 기능도 빠져있다는 것이다.

 

그럼 함수혐 컴포넌트는 언제 사용할까?

일단 함수형 컴포넌트는 초기 마운트 속도가 미세하게 빠르고 불필요한 기능은 없기 때문에 메모리 자원도 덜 사용한다. 위에처럼 단순히 값을 받아와서 보여주기만 하는 용도이면 함수형 컴포넌트를 만들면 컴포넌트 수가 많아졌을 때 속도가 최적화 될 수 있다.

 

그리고 컴포넌를 엄청 많이 만드는 것이 아니면 성능적으로 함수형과 클래스형 둘 다 큰 차이는 없다.

다만 차이는 컴포넌트를 간단하게 할 수 있는 것, 그리고 컴포넌트의 기능과 컴포넌트가 어떻게 보여질지를 따로 작업할 때 차이가 있다.

 

즉 presentation component 와 container component라는 개념이 있는데 나중에 Redux개념을 학습할 때 알아보도록 하자.

 

만약에 app 컴포넌트에서 name값을 inflearn으로 넣으면 아래와 같이 나온다.

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

class App extends Component {
  render() {
    return <MyName name="inflearn" />;
  }
}

export default App;

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN