React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다.
클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다.
JAX, 컴포넌트 생성, Props
https://joylee-developer.tistory.com/106
생활코딩 React 강의 (3) - 컴포넌트, 다른 파일로 컴포넌트 분리하기
리액트가 없다면 코드를 그대로 다 html문서에 작성해야 한다. 코드가 많아질수록 한 눈에 구조를 보기 힘들다. 이럴 때 리액트를 사용하면 컴포넌트의 이름으로 간단하게 html 문서를 구성할 수
joylee-developer.tistory.com
함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하려고 한다.
상위 컴포넌트로 부터 전달되는 것 : props, children
컴포넌트 내에서 생성/사용하는 것 : state
props
<MyButton title="My Button 1" onPress={() => alert("Press button 1!")}/>
<MyButton title="My Button 2" onPress={() => console.log("Press button 2!")}/>MyButton 컴포넌트를 만들 때 위와 같이 작성할 수 있다.
HTML에서는 속성이라고 불린 title, onPress가 여기에서는 props라고 부른다. props는 하위 컴포넌트에 값을 전달하기 위해서 사용하는데, props를 통해 재사용하기 좋은 컴포넌트를 만들 수 있다.
props는 두 가지 방법으로 사용할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// props 사용하기
// 1. props.{props이름}
const MyButton = props => {
return (
<TouchableOpacity
onPress={props.onPress}>
<View style={{ backgroundColor: "turquoise", padding: 10, margin: 10 }}>
<Text style={{ fontSize: 20, color: "white" }}>
{props.title}
</Text>
</View>
</TouchableOpacity>
);
};
// 2. 사용할 props 미리 지정
const MyButton = ({ title, onPress }) => {
return (
<TouchableOpacity
onPress={onPress}>
<View style={{ backgroundColor: "turquoise", padding: 10, margin: 10 }}>
<Text style={{ fontSize: 20, color: "white" }}>
{title}
</Text>
</View>
</TouchableOpacity>
);
};
|
cs |
props의 기본값 지정하기
두 가지 방법으로 가능하다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// props의 기본값 지정하기
// 1. 직접 지정하기
const MyButton = ({ title = "default", onPress = {() => alert("default")} }) => {
// 2. defaultProps 사용하기
const MyButton = props => {
//...
}
MyButton.defaultProps = {
title: "default",
onPress: () => alert("default"),
};
|
cs |
children
컴포넌트를 만들 때 태그 사이에 작성한 내용
<MyButton>Title</MyButton>컴포넌트를 <Mybutton>과 </MyButton>으로 나눠서 작성하면서 안에 Title이라고 적어주었다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const MyButton = props => {
return (
{/* 간단하게 태그만 작성함 */}
<TouchableOpacity>
<View>
<Text>
{props.children || props.title}
</Text>
</View>
</TouchableOpacity>
);
};
|
cs |
props와 동일하게 사용할 수 있으며, props와 같은 방법으로 사용가능하다.
{props.children || props.title} 의 경우, props.children이 있으면 props.children을 표시하고, 없으면 props.title을 표시한다.(우선순위가 children에 있다.)
children으로 전달된 Title이 표시된다.
propsTypes
props 관리도구이다.
미리 type이나 isRequired를 설정해 맞지 않으면 오류를 발생시킬 수 있다.
https://github.com/facebook/prop-types
GitHub - facebook/prop-types: Runtime type checking for React props and similar objects
Runtime type checking for React props and similar objects - GitHub - facebook/prop-types: Runtime type checking for React props and similar objects
github.com
사용법
https://ko.reactjs.org/docs/typechecking-with-proptypes.html
PropTypes와 함께 하는 타입 검사 – React
A JavaScript library for building user interfaces
ko.reactjs.org
React에서 똑똑하게 Props 관리하기
PropTypes, 혹은 TypeScript로 props의 타입을 정해주는 방법 알아보기
medium.com
'React Native' 카테고리의 다른 글
| React Native - 이벤트 (0) | 2021.12.03 |
|---|---|
| React Native - State (0) | 2021.12.03 |
| React Native - 컴포넌트 (0) | 2021.12.03 |
| React Native - Expo 프로젝트 만들기 (0) | 2021.12.02 |
| React Native 란? (0) | 2021.12.01 |