[keyword]
함수형 컴포넌트, 클래스형 컴포넌트,
props값 전달받기, state값 사용하기
✔️ 리액트를 사용하여 프론트 개발을 할 때 컴포넌트를 선언하는 두 가지 방법
1. 클래스형 컴포넌트
2. 함수형 컴포넌트
(2019년 버전16.8 부터 함수형 컴포넌트에서도 리액트 훅(hook)을 통해,
클래스 컴포넌트에서만 사용가능했던 state기능, 라이프사이클 API가 사용 가능해짐.
따라서 '현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.)
1. 클래스형 컴포넌트는
render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.
import React, { Component } from 'react';
class App extends Component {
render() {
const name = '클래스형 컴포넌트';
return <div>{name}</div>;
}
}
export default App;2. 함수형 컴포넌트는
클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다.
자기 자신이 렌더 함수이기 때문에 render 함수 없이 return 값만 사용한다.
import React from 'react';
function App() {
const name = '함수형 컴포넌트';
return <div>{name}</div>;
}
export default App;✔️ 함수형 컴포넌트를 선언하는 두 가지 방법
1) 일반적인 함수 선언 방식
2) ES6의 화살표 함수(arrow function) 방식: 함수를 파라미터로 전달할 때 유용하다.
일반 함수와 화살표 함수의 차이점
일반 함수는 자신이 종속된 객체를 this로 가리키며,
화살표 함수는 자신이 종속된 인스턴스를 this로 가리킨다.
✔️ props 값 전달받기
: 부모 컴포넌트에서 props로 설정한 값을 하위 컴포넌트에서 받기
props는 프로퍼티(properties)를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 표현이다.
1. 클래스형 컴포넌트는
부모 컴포넌트에서 정의한 props 값을 {this.props.props이름}으로 받아서 나타낸다.
2. 함수형 컴포넌트는
부모 컴포넌트에서 정의한 props 값을 함수의 인자(=파라미터)로 받아온다.
즉, 부모 컴포넌트에서 전달받은 props 값을 함수형 컴포넌트의 인자로 설정하여 함수 내부에 props 값을 전달해서 화면에 나타나게 하는 것이다. (❕이때 props이름은 사용자 임의대로 설정이 가능하다.)
✔️ state 값 사용하기
: 내부적으로 자신의 상태를 변경, 관리하기 위해 사용하는 state 값
state는 컴포넌트 내부에서 바뀔 수 있는 값(동적인 값)을 의미한다.
props의 경우 부모 컴포넌트가 설정해서 자식 컴포넌트는 읽기만 할 수 있는 값이며, 바꾸기 위해서는 부모 컴포넌트에서 직접 변경해야 한다. 따라서 자식 컴포넌트 내에서 값을 변경해야 하는 경우 state를 사용한다.
state를 적절하게 사용한다면 해당 컴포넌트 내에서 데이터가 변경될 때 마다 그때그때 변경된 데이터를 UI에서 불러올 수 있기 때문에 적절하게 사용하면 매우 유용하다. 함수형 컴포넌트든 클래스형 컴포넌트든 state를 직접 조작하는 것이 아닌, setState나 useState와 같은 세터 함수를 사용하여 조작해야 한다.
1. 클래스형 컴포넌트는
(constructor 매서드에서 this.state의 초기값을 생성해 주어야 한다. 그리고 constructor를 작성할 때 super(props)를 반드시 호출해 주어야 한다.) 클래스 내에 state의 초기값을 설정해서 사용한다. {this.state.state속성명}으로 state 값을 사용할 수 있다. state 값을 변경할 때는 this.setState 함수를 사용한다. (❕클래스형 컴포넌트의 state는 객체형태여야만 한다.)
2. 함수형 컴포넌트는
useState 함수를 통해 state 값을 불러오고 변경할 수 있다. useState 함수는 2개의 값을 가진 배열을 return하는(상태를 관리할 수 있게 하는) 리액트 내장 훅이다. 첫 번째 값은 상태값을 가지고(=현재 상태), 두 번째 값은 상태값을 변경하는 함수(=Setter 함수)이다.
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];원래는 ⬆️ 이렇게 해야 하지만
const [number, setNumber] = useState(0);'배열 비구조화 할당'을 써서 ⬆️ 이렇게 할 수 있다.
참고자료:
[1] https://react.vlpt.us/basic/07-useState.html
[2]https://react.vlpt.us/basic/24-class-component.html
[3]https://devowen.com/298
[4]https://codechasseur.tistory.com/98
