[1] Props, State

Props와 State는 리액트에서 데이터를 다룰 때 사용되는 내용이다.

 Props란? 

주로 부모컴포넌트가 자식컴포넌트한테 값을 전달할 때 사용되는 내용

하지만 자식 입장에서는 읽기전용 이기 때문에 값을 바꾸지 몬해용

나중에 컴포넌트를 만들게되면, 아래와 같이 그걸 불러와서 사용을 할 수가 있음.

그리고 만약 우리가 어떤 값을 컴포넌트를 렌더링 할 때 전달해주고 싶다, 하면 value="value1"처럼 값을 넘겨줄 수 있음.

여기에서 value가 바로 props 인 것! 되게 중요합니당! ⋌༼ •̀ ⌂ •́ ༽⋋ 

<Child value="value1" />

---

 실습! - 자식 컴포넌트에 값을 넘겨주기 

// MyName.js
// App.js에서 사용할 MyName이라는 컴포넌트를 하나 만들었다.

import React, { Component, Fragment } from 'react';

class MyName extends Component {
// 아래의 코드가 최신 코드이므로 기본 코드를 만들 때에는 아래의 코드처럼 static을 사용해 만든다!
  static defaultProps = {
    name: '기본이름' // 만약 this.props.name에 값이 들어가지 않는다면, 기본적으로 들어갈 값이다.
  };
  render() {
    return (
      <div>
        안녕하세요! 제 이름은
        <b> 어쩌구(props가 들어갈 곳) {this.props.name} </b> 입니다.
      </div>
    );
  }
}
// 아래의 코드는 위의 static defaultProps와 완전히 같은 내용이다.
// 하지만 위의 코드가 더 최신이라 위를 쓰는 것을 더 추천!
MyName.defaultProps = {
  name: '기본이름'
}
// 

export default MyName;

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

class App extends Component {
  render() {
    return (
      <div>
        <MyName /> {/* 이렇게 컴포넌트를 불러와 사용할 수 있다. name에는 defaultValue가 들어가게 된다. */}
        <MyName name="리액트" /> {/* name에는 리액트 가 들어가게 된다. */}
      </div>
    );
  }
}

export default App;

---

 함수형 컴포넌트 

컴포넌트를 만드는 방법 중, 우리는 지금까지 클래스형 컴포넌트를 썼고, 또 다른 방법으로 함수형 컴포넌트도 있음

단순히 props만 받아와서 보여주는 경우, 딱히 기능이 없이 뭔가를 받아와서 보여주는 경우에 사용!

 

함수형 컴포넌트의 문법과 예제)

// 아래의 문법은 비구조 할당 문법이라고 합니당. 함수형 컴포넌트를 사용할 때에는 이 문법을 사용합니다.
const object = { a:1, b:2 };

// [ 아래의 두 코드는 같은 내용 ]
const a = object.a; const b = object.b;
const { a, b } = object;

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

sayHello({ name: 'react', age:'몰라' })

import React from 'react';
// 함수형 컴포넌트를 사용할 때에는 리액트에서 Component를 불러오지 않아도 됩니당.

// 함수형 컴포넌트
const MyName = ({ name }) => {
  // name 값을 props로 받아와서
  return (
    <div>
      {/* 이 값을 여기에서 사용하는 것 */}
      안녕하세요! 제 이름은 {name} 입니다.
    </div>
  );
};
// defaultProps를 정의해주고 싶을 때에는
MyName.defaultProps = {
  name: '안녕'
};

export default MyName;

 

위에 나왔던 구조 분해 할당 문법에 대해 나와있는 공식 문서이다.

읽어보니 대충 구조를 분해해 값을 할당한다는 뜻 같당. 나름 되게 이해하기도 쉽고 공부가 많이 되었당!!!

구조 분해 할당

---

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

함수형 컴포넌트에는 State, Lifecycle이라는 기능이 없음.

그리고 함수형 컴포넌트가 초기 마운트 속도가 아주 미세하게 조금 더 빠르고, 불필요한 기능이 없어 메모리를 조금 덜 사용함

그래서 단순히 어떤 값을 받아와 보여주기만 하는 용도라면, 함수형 컴포넌트로 만들어 나중에 컴포넌트가 많아졌을 때, 성능적으로 조금 더 나은 효과를 기대할 수 있음.

조금 더 나중에 컴포넌트를 만들 때, 그 기능과 어떻게 보여지는지를 따로 작업하게 될텐데 (presentational 컴포넌트, container 컴포넌트를 따로 나누게 됨), 그 때 Redux와 함께 조금 더 배우며 알아볼 것이니 지금은 요정도만 알아둬도 됨!