props와 state

Props 를 사용하는 방법

props 와 state는 리액트에서 데이터를 다룰때 사용되는 개념이다.

props는 부모가 자식에게 데이터를 전달할 때 사용한다.

<Child value="value">

위처럼 하위 컴포넌트에게 value="value" 형태로 값을 넘겨준다.

모든 컴포넌트는 렌더함수가 있어야한다.

부모 컴포넌트 App.js

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

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

자식 컴포넌트 MyName.js

import  React,  {  Component  }  from  'react';
class  MyName  extends  Component {
	render() {
		return  <div>안녕하세요. 제 이름은 {this.props.name}입니다.</div>;
	}
}
export  default  MyName;

defaultProps

부모로부터 props값이 전달이 안될 때의 상황을 대비하여 자식 컴포넌트에서 defaultProps값을 설정해준다.

class  MyName  extends  Component {
	static defaultProps = {
		name:  '기본이름'
	};

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

class문법에서 default 값을 설정할땐 static내부에 선언해준다.

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

함수 외부에서도 defaultProps 설정해줄 수 있다.

내부에서 선언된 default 와 외부에서 선언된 default 는 값은 코드다.

static이 최신 문법

함수형 컴포넌트

다른 기능이 없고 props로 받아와서 보여주는 기능만 사용할 경우에 함수형 컴포넌트로 사용한다.

// 함수형 컴포넌트
const  MyName  =  ({ name })  =>  {
	return  <div>제 이름은 {name}입니다.</div>;
};

// 함수형 컴포넌트의 defaultProps
MyName.defaultProps  =  {
	name:  'velopert'
};

export  default  MyName;

함수형 컴포넌트를 사용하게 된다면 더이상 상단의 import에서 Component를 불러오지 않아도 된다.

비구조화 할당

위에서 보이는 ({ name })은 비구조화 할당 객체 내부에 있는 값을 이름으로 넘겨주는 것, 비구조화 할당 문법을 사용한 것이다.

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

객체를 다룰때 다루는 형식을 비구조화 할당을 이용해서 간단하게 다룰 수 있다.

const {a,b} = object

console.log(a) // 1
console.log(b) // 2

비구조화 문법은 함수에서도 사용할 수 있다.

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

sayHello({ name : 'react' , age : '20' })

이렇게 전달해준 객체의 name과 age값을 하나하나 추출해서 사용할 수 있도록 해주는 문법이 비구조화 문법이다.

함수형 컴포넌트 vs class 컴포넌트

함수형 컴포넌트와 class형 컴포넌트의 주요 차이점은 함수형 컴포넌트는 state 기능이 없고 , 라이프사이클 기능이 없다는 것이다.

그렇다면 함수형의 장점은?

• 함수형은 초기 마운트 속도가 미세하게 빠르다.
• 불필요한 기능은 없기 때문에 메모리 자원은 덜 사용한다.

그렇기 때문에 단순히 어떤 값을 받아서 보여주기만 하는 용도이다. 이런 경우에는 함수형 컴포넌트를 사용한다면 나중에 컴포넌트 수가 많아졌을때 속도가 최적화 될 수 있다.

하지만 컴포넌트 수가 엄청나게 많은게 아니라면, 사실상 성능적으로 큰 차이는 없다.

다만, 컴포넌트 만드는것이 간단하다는 것과 또는 나중에 컴포넌트의 기능의 어떻게 보여지는지에 대해서 ( redux 배울 때) 차이점이 두드러진다.

State 를 사용하는 방법

props는 자식 입장에서는 읽기 전용이다.

• state는 컴포넌트 내부에 있고 내부에서 바뀔 수 있는 값이다. 또한 값이 바뀔때마다 리렌더링된다.
• 만약에 값의 변화가 필요하다할때 컴포넌트의 내장함수 중 하나인 setState()를 통해서 값을 변화해줘야한다.

import  React,  {  Component  }  from  'react';

class  Couter  extends  Component {
	state = {
		num:  0
	};

	handleIncrease  = () => {
		this.setState({
			num:  this.state.num  +  1
		});
	};

	handleDecrease  = () => {
		this.setState({
			num:  this.state.num  -  1
		});
	};
	
	... 생략

화살표 함수로 handleDecrease다룬 이유
내부에서 왜 render()함수처럼 함수를 정의하지 않고 화살표함수로 했을까?

만약 render함수처럼 정의했다면 this를 정의하지 못하는 경우가 발생한다. 콘솔로 출력해조면 this 가 undefined로 출력된다.

만약 render함수처럼 정의해서 사용하고 싶다면 constructor에서 this를 재정의해줘야 한다.

constructor는 컴포넌트가 만들어질때마다 호출되는 함수

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

이렇게 정의해준다면 화살표 함수처럼 this를 사용할 수 있다.
하지만 화살표함수로 정의해준다면 이러한 과정을 생략해줘도 된다.