React | 4. 컴포넌트_props
클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'lucyyyy';
return (
<>
{name}
</>
);
}
}
export default App;
- 클래스형 컴포는터의 경우 함수형 컴포넌트와는 다르게 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것!
- 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.
- 함수형 컴포넌트 장점
- 선언하기가 편하다.
- 메모리 자우너도 클래스형 컴포넌트보다 덜 사용한다.
- 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.
- 함수형 컴포넌트 단점
- state와 라이프사이클 API의 사용이 불가능하다. → Hooks이 도입되면서 해결됨.
- Arrow Function
rsc + tab
하면 함수형 컴포넌트가 빠르게 생성된다.
컴포넌트 생성
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'lucyyyy';
return (
<>
{name}
</>
);
}
}
export default App;
- 선언하기가 편하다.
- 메모리 자우너도 클래스형 컴포넌트보다 덜 사용한다.
- 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.
- state와 라이프사이클 API의 사용이 불가능하다. → Hooks이 도입되면서 해결됨.
rsc + tab
하면 함수형 컴포넌트가 빠르게 생성된다.
src>components>component.js생성
//component.js
import React from 'react';
function MyComponent() {
return (
<div>
My Component
</div>
);
}
export default MyComponent; //모듈 내보내기(export)
//App.js
import React from "react";
import MyComponent from './components/component'; //모듈 불러오기(import)
function App() {
return <MyComponent></MyComponent>
}
export default App;
props
1. 함수형 컴포넌트에서 props 사용하기(defaultProps, children)
properties를 줄인 표현. 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
//App.js
import React from "react";
import MyComponent from './components/component';
function App() {
return <MyComponent name="lucy">리액트</MyComponent>;
}
export default App;
props값을 지정한다.
태그 사이의 내용을 보여주는 props를 children이라고 한다.
//component.js
import React from "react";
function MyComponent(props) { // props 받아온다.
return (
<div>
내 이름은 {props.name} 입니다! <br />
children값은 {props.children}입니다.
</div>
);
}
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;
name이라는 props를 렌더링한다.
defaultProps는 아래에 props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정한다.
2. 비구조화 할당 문법을 통해 props 내부 값 추출하기
props.name, props.children과 같이 props라는 키워드를 앞에 붙여 주고 있다. 이러한 작업을 더 편하게 하기 위해 ES6 비구조화 할당 문법을 사용하여 내부 값을 바로 추출한다.
//component.js
import React from "react";
function MyComponent(props) {
const { name, children } = props;
return (
<div>
내 이름은 {name} 입니다! <br />
children값은 {children}입니다.
</div>
);
}
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;
더 간단하게 사용해보자.
//component.js
import React from "react";
function MyComponent({ name, children }) {
return (
<div>
내 이름은 {name} 입니다! <br />
children값은 {children}입니다.
</div>
);
}
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;
3. propTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용한다.
우선 import 구문을 사용하여 propTypes를 불러와야한다.
//component.js
import React from "react";
import PropTyoes from "prop-types"; // propTypes 불러온다.
function MyComponent({ name, children }) {
return (
<div>
내 이름은 {name} 입니다! <br />
children값은 {children}입니다.
</div>
);
}
MyComponent.defaultProps = {
name: "기본 이름",
};
MyComponent.propTypes = {
name: PropTypes.string, // string으로 지정
};
export default MyComponent;
name값은 무조건 string 형태로 전달해야 한다.
//App.js
import React from "react";
import MyComponent from "./components/component";
function App() {
return <MyComponent name={3}>리액트</MyComponent>;
}
export default App;
name={3}
으로 type을 number로 주었다. 에러가 발생하지 않은 것 같지만 콘솔 창을 열어보면 에러 발생한 것을 알 수 있다.
isRequired를 사용하여 필수 propTypes 설정
//component.js
import React from "react";
import PropTypes from "prop-types";
function MyComponent({ name, children, favoriteNumber }) { // props로 3개 받아옴
return (
<div>
내 이름은 {name} 입니다! <br />
children값은 {children}입니다.
<br />
내가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
MyComponent.defaultProps = {
name: "기본 이름",
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired, // 필수!!
};
export default MyComponent;
.isRequired만 붙여주면 된다.
//App.js
import React from "react";
import MyComponent from "./components/component";
function App() {
return <MyComponent name={"lucy"}>리액트</MyComponent>;
}
export default App;
지금 favoriteNumber을 설정하지 않았기 때문에 콘솔창을 열어보면 에러가 발생한 것을 알 수 있다.
//App.js
import React from "react";
import MyComponent from "./components/component";
function App() {
return (
<MyComponent name={"lucy"} favoriteNumber={1}>
리액트
</MyComponent>
);
}
export default App;
정상적으로 작동한다.
4. 클래스형 컴포넌트에서 props 사용하기
//component.js
import React, { Component } from "react";
import PropTypes from "prop-types";
class MyComponent extends Component {
render() {
const { name, favoriteNumber, children } = this.props; // this.props로 묶어준다. 아니면 매번 this.props.*** 이라고 써야한다.
return (
<div>
내 이름은 {name} 입니다! <br />
children값은 {children}입니다.
<br />
내가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
}
MyComponent.defaultProps = {
name: "기본 이름",
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
export default MyComponent;
클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법도 있다.
import React, { Component } from "react";
import PropTypes from "prop-types";
class MyComponent extends Component {
static defaultProps = {
name: "기본 이름",
};
static propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
render() {
const { name, favoriteNumber, children } = this.props;
return (
<div>
내 이름은 {name} 입니다! <br />
children값은 {children}입니다.
<br />
내가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
}
export default MyComponent;
Author And Source
이 문제에 관하여(React | 4. 컴포넌트_props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@printver_2world/React-4.-컴포넌트props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)