클래스형 컴포넌트
import React from 'react';
class Square extends React.Component {
render() {
return (
<button className="square" onClick={this.props.onClick}>
{this.props.nums}
</button>
);
}
}
export default Square;
함수형 컴포넌트
import React from 'react';
function Square(props) {
return (
<button className='square' onClick={props.onClick}>
{props.nums}
</button>
);
}
export default Square;
Props 를 사용한 기본적인 함수형 컴포넌트
import React from 'react';
const Square = (props) => {
return (
<button className="square" onClick={props.onClick}>
{props.nums}
</button>
);
};
export default Square;
컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있습니다.
props 는 객체 형태로 전달되며, 만약 nums값을 조회하고 싶다면 props.nums 을 조회하면 됩니다.
이 경우 props 내부의 값을 조회 할 때마다 props. 를 입력해야하는데, 함수의 파라미터에서 비구조화 할당 문법을 사용하여 간결하게 작성할 수 있다.
비구조화 할당하기
import React from 'react';
const Square = ({ nums, onClick }) => {
return (
<button className="square" onClick={onClick}>
{nums}
</button>
);
};
export default Square;
- 컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기한다.
'Framework > react' 카테고리의 다른 글
[리액트 틱택토 게임 응용하기] part 1_2 말의 갯수 8개로 제한하기 (0) | 2024.06.17 |
---|---|
[리액트 css]테이블 만들기 table thead tr td (0) | 2024.06.15 |
[리액트 틱택토 게임]this.props.children 이해하기, props 이해하기 (1) | 2024.06.14 |
[리액트] map으로 배열 렌더링하기 (1) | 2024.06.13 |
함수형 컴포넌트 클래스형 컴포넌트 선언 , 사용해보기 (feat.CodeSandbox) (0) | 2024.06.13 |