[React] props

이번에 구매한 C to HDMI 케이블은 정상작동 된다 ^_^ 가만 안둔다 쿠팡...

예제와 함께 이해를 해볼 예정🔥🔥🔥

먼저 앞서 요약해서 말하면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정은 불가능하다.

반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다.

1. props 란?

먼저 App.js에 MyName.js를 import하고 작성해보자

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

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

export default App;

그리고 MyName이라는 새로운 컴포넌트를 src 폴더에 만들고 나서 props를 사용해보겠다.

import React, { Component } from 'react';

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

export default MyName;

자신이 받아온 props 값은 this. 키워드를 통하여 조회 할 수 있습니다. 지금 name이라는 props 를 보여주도록 설정해주었다.

이렇게 컴포넌트를 만들고나면, 일반 태그를 작성하는것처럼 작성해주면 된다. 그리고 props값은 name="리액트" 이런식으로 태그의 속성을 설정해주는 것 처럼 하면된다.

결과

안녕하세요! 제 이름은 리액트 입니다.

그리고 가끔씩 props를 빠뜨릴때가 있다. 아니면 특정 상황에서 props를 일부러 비워야 할 때도 있다. 그때 props의 기본값을 설정해줄 수 있는데, 그게 바로 defaulutProps이다.

import React, { Component } from 'react';

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

export default MyName;

결과

안녕하세요! 제 이름은 기본이름 입니다.

함수형 컴포넌트

위에서 작성한건 class형 컴포넌트이다. 함수형 컴포넌트는 단순히 rpops만 받아와서 보여주기만 하는 컴포넌트의 경우엔 더 간편한 문법으로 작성할 수 있는 방법이 있다. 함수형태로 작성하는 것인데, 방금 위에서 작성했던 MyName 컴포넌트를 다시 작성해보자

import React from 'react';

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

export default MyName;

뭔가... 훨씬 간단하긴 하다. 물론 화살표함수에 비구조화 할당 문법으로 name이 작성된 것 빼곤 많이 봐왔던 문법이다. 비구조화 할당

함수형 컴포넌트와 클래스형 컴포넌트 차이점

state 와 LifeCycle 이 빠져있다는 점이다. 그래서 컴포넌트 초기 마운트가 아주 미세하게 빠르고, 메모리 자원을 덜 사용한다. 미세한 차이이니, 컴포넌트를 무수히 많이 렌더링 하게 되는게 아니라면 성능적으로 큰 차이는 없다.