Contents1. 클래스형 컴포넌트 2. 함수형 컴포넌트 3. 클래스형 컴포넌트에서 props 사용하기 4. 함수형 컴포넌트에서 props 사용하기 5. 클래스형 컴포넌트에서 state 사용하기 6. 함수형 컴포넌트에서 state 사용하기
클래스형 컴포넌트를 사용하기 위해서는 React.Component 를 상속받아야 합니다.
import React, { Component } from 'react';
class Welcome Extends Component {
render () {
return <h1>Hello, {this.props.name}</h1>;
}
}
export default Welcome;클래스형 컴포넌트는 render 함수가 꼭 있어야 합니다.
함수형 컴포넌트와는 달리 클래스형 컴포넌트를 사용하면
state 를 사용할 수 있고 Lifecycle 를 사용할 수 있습니다.
함수형 컴포넌트는 다음과 같이 사용할 수 있습니다.
import React from 'react';
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
};
export default Welcome;함수형 컴포넌트는 render 함수를 따로 호출할 필요가 없습니다.
한줄 이상의 JSX 코드를 return할 때에는 클래스 / 함수형 컴포넌트 모두
return() 을 사용하면 됩니다.
컴포넌트에 여러 요소가 존재할 경우 [return()을 사용할 경우] 반드시 부모 컨테이너로 감싸줘야 합니다.
props 는 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
props 는 부모 컴포넌트에서 값을 지정해 줄 수 있습니다.
또한 props 는 컴포넌트 내부에서 값을 변경하지 못합니다.
클래스형 컴포넌트에서 props 는 render 함수에서 사용할 수 있습니다.
// Welcome.js
import React, { Component } from 'react';
class Welcome extends Component {
render() {
const { name, age } = this.props;
return(
<div>
Welcome, {name} / {age}. <br />
</div>
);
}
}
export default Welcome;// App.js
import React, { Component } from 'react';
import Welcome from './Welcome';
class App extends Component {
render () {
return <Welcome name="Lia" age={999} />;
}
}
export default App;App.js 와 같은 부모 컴포넌트에서 props 값을 사용할 수 있습니다.
props 값을 지정해 주지 않으면 Welcome 컴포넌트는 이름과 나이를 출력할 수 없습니다.
이 때에 props 의 값을 지정해 주지 않아도 기본 props 의 값을 사용 할 수 있습니다.
props 의 기본값은 defaultProps 를 사용하여 지정할 수 있습니다.
(...)
Welcome.defaultProps = {
name: 'default name',
age: 1,
};
(...)defaultProps 는 클래스 / 함수형 컴포넌트 모두 동일한 방식으로 사용할 수 있습니다.
props 중에는 컴포넌트 태그 사이의 내용을 보여주는 props 가 있습니다.
props.children 이 컴포넌트 태그 사이의 내용을 보여주는 props 입니다.
// App.js
import React, { Component } from 'react';
import Welcome from './Welcome';
class App extends Component {
render () {
return <Welcome name="Lia" age={999}>안녕하세요</Welcome>;
}
}
export default App;// Welcome.js
import React, { Component } from 'react';
class Welcome extends Component {
render() {
const { name, age, children } = this.props;
return(
<div>
Welcome, {name} / {age}. <br />
{children} // 안녕하세요
</div>
);
}
}
export default Welcome;리액트에서는 props 의 타입을 확인할 수 있습니다.
Flow 혹은 TypeScript 와 같은 JavaScript Extensions 을 사용할 수 있습니다.
위와 같은 Extensions 을 사용하지 않아도 리액트에서는
prop-types 라이브러리를 사용할 수 있습니다.
React v15.5 부터는 다른 패키지로 이동하여 prop-types 라이브러리를 사용해야 합니다.
yarn add prop-types 로 설치해야 합니다.
prop-types 는 다음과 같이 사용할 수 있습니다.
(...)
import PropTypes from 'prop-types';
(...)
Welcome.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
};
(...)prop-types 의 data type은 사이트 에서 확인할 수 있습니다.
prop-types 또한 클래스 / 함수형 컴포넌트에서 모두 동일한 방법으로 사용할 수 있습니다.
함수형 컴포넌트는 함수의 파라미터로 props 값을 받아올 수 있습니다.
// Hello.js
import React from 'react';
const Hello = (props) => {
return <h1>Hello, {props.name}!!<h1>;
};
export default Hello;부모 컴포넌트에서 props 값을 지정해 주는것은 클래스형 컴포넌트와 같습니다.
함수형 컴포넌트도 클래스형 컴포넌트와 마찬가지로 props.children 으로
컴포넌트 태그 사이에 있는 값을 확인할 수 있습니다.
// Hello.js
import React from 'react';
const Hello = (props) => {
return (
<div>
Hello, {name} / {age} <br />
{props.children}
</div>
);
};defaultProps 와 propTypes 사용법은 클래스형 컴포넌트와 같습니다.
state 는 props 와 달리 컴포넌트 내부에서 변경 가능한 값입니다.
클래스형 컴포넌트에서 state 를 설정할 때에는 크게 두가지가 있습니다.
생성자를 이용하는 방법과 이용하지 않는 방법이 있습니다.
생성자를 이용하여 state 를 설정하는 방법은 다음과 같습니다.
(...)
constructor(props) {
super(props);
this.state = {
name: 'Lia',
age: 999,
};
}
(...)여기서 주의해야 할 점은 클래스형 컴포넌트는 항상 props 로
기본 constructor 를 호출해야 합니다.
생성자를 사용하지 않고 state 를 설정하는 방법은 다음과 같습니다.
(...)
class MyComponent extends Component {
state = {
name: 'Lia',
age: 999,
};
(...)
}
(...)위와 같이 설정한 state 는 구조 분해 할당(비구조화 할당)을 이용하여
사용할 수 있습니다.
(...)
constructor(props) {
super(props);
this.state = {
name: 'Lia',
age: 999,
};
}
render() {
const { name, age } = this.state;
return(
<div>
{name}
{age}
</div>
);
}
(...)state 를 사용할 때에도 주의해야 할 것이 있습니다. state 값을 변경할 때에는 직접적으로 접근하면 안됩니다. 함수형 컴포넌트 같은 경우 setState 를 이용하여 간접적으로 접근해야 합니다.
state 값을 변경할 때에는 setState 를 사용하게 됩니다. setState 의 형태는 다음과 같습니다.
setState(updater, [callback])
setState 함수의 첫번째 인자인 updater 는 다음과 같은 형태를 가지는 함수입니다.
(state, props) => stateChange
state 는 기존 state 의 값이고 props 는 현재 컴포넌트가 가지고 있는 props 입니다.
여기서 state 와 props 를 직접 변경하려고 하면 안됩니다.
this.setState((prevState, props) => {
return { age: prevState.age + props.step };
});다음 state 값이 이전 state 값에 기반한다면 위와 같이 사용하는 것이 좋습니다.
setState 에 첫번째 인자로 객체를 전달해 줄 수 있습니다.
this.setState({ name: 'Name is changed!!' });그리고 두 번째 인자인 callback 함수는 state 값을 업데이트 한 후에 실행됩니다.
React v16.8 부터 Hook Api 를 이용하여 함수형 컴포넌트에서 state 를 사용할 수 있습니다.
이전 버전은 함수형 컴포넌트에서 state 를 사용할 수 없습니다.
함수형 컴포넌트에서 state 를 사용하려면 useState 를 사용해야 합니다.
useState 는 다음과 같이 사용할 수 있습니다.
const [state, setState] = useState(initialState);
useState 는 배열을 반환하게 됩니다. 배열을 반환받아서 구조 분해 할당으로
state 와 setState 를 사용할 수 있습니다.
useState 함수에 인자를 전달하면 state 값을 전달한 인자값으로 초기화 시킵니다.
설정한 state 는 setState 함수를 사용하여 값을 변경할 수 있습니다.
다음과 같이 사용할 수 있습니다.
const Counter = ({initialCount}) => {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}본 블로그는 김민준(velopert)님의 저서 '리액트를 다루는 기술 (개정판)'을 참고하여 정리한 글입니다. 이점 참고 부탁드립니다.
