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를 사용할 수 있다.
하지만 화살표함수로 정의해준다면 이러한 과정을 생략해줘도 된다.
