3장. 컴포넌트

[처음 배우는 리액트 네이티브] 책을 공부하면서 정리한 내용입니다.

JSX 문법

1. 여러개의 요소를 변환할 때에도 하나의 부모로 감싸야한다.
   ex. View(=div), Fragment(import 필요, 단축 가능)

<View> </View>

<Fragment> </Fragment>
<> </>

2. 변수 : 자바스크립트의 변수처럼 전달

const 변수명 = " ";

3. 조건문 : if문, 삼항 연산자, AND/OR 연산자
   ; 컴포넌트 반환이 null -> 허용, undefined -> 오류

4. 주석

{/* */}

태그 안 : //, /* */

5. 스타일링 : 객체 형태, 카멜표기법

컴포넌트

: 재사용이 가능한 조립 블록. 화면에 나타나는 UI요소.
ex. 리액트 네이티브 컴포넌트, Button 컴포넌트

props

: properties. 부모 컴포넌트로부터 전달된, 상속받은 속성값. 자식 컴포넌트에서는 변경 불가능

속성으로 전달하는 방법

App.js

<MyButton title="Button" />

: MyButton 컴포넌트를 호출 할 때 title 속성에 문자열 전달.

MyButton.js

const MyButton = props => {
	console.log(props);
    return (...);
 };

: 전달받은 porps를 함수의 피라미터로 받아서 사용가능.

출력값 : "title" = "Button"

태그를 사용하여 전달하는 방법

App.js

<MyButton> Children Props </MyButton>

: 태그 사이에 있는 값은 자식 컴포넌트의 Porps에 children으로 전달.

MyButton.js

const MyButton = props => {
	return (
    	...
        <Text> {props.children} </Text>
    ...

: props.children을 통해 전달받은 값 사용.

만약, 아무 값도 전달하지 않으면 아무것도 나타나지 않기 때문에 필수적으로 필요한 값이 있을 경우, 기본값을 defaultProps로 지정한다.

MyButton.defaultProps = {
	title: 'Button' };

PropTypes
:props의 타입과 필수여부를 지정할 수 있는 방법
(prop-types 라이브러리 설치 필요)

MyButton.propTypes = {
	title: PropsTypes.string.isRequired };

: title의 값이 string이 아니거나 전달되지 않으면 경고 메세지가 출력된다.

State

: 컴포넌트 내부에서 생성되고 변경 가능. 상태가 변하면 컴포넌트는 리렌더링된다. Hooks를 사용해 함수형 컴포넌트로 관리.

useState 사용하기

const [state, setState] = useState(initialState);

: state = 상태를 관리할 변수,
setState = 변수의 상태를 변경할 수 있는 세터 함수

이벤트

1. press 이벤트 : 웹프로그래밍에서의 onClick과 비슷. (4가지)
   onPressIn - 터치가 시작될 때 항상 호출,
   onPressOut - 터치가 헤제될 때 항상 호출,
   onPress - 터치가 해제될 때 OnPressOut 이후 호출,
   onLongPress - 터치가 일정시간 이상 지속될 시 호출

2. change 이벤트 : 변화를 감지. TexpInput 컴포넌트에서 자주 사용.

3. Pressable 컴포넌트 : 사용자의 터치에 상호작용하는 넘포넌트
   HitRect - 버튼보다 약간 넓은 범위를 클릭해도 이벤트 발생 가능.
   PressRect - 버튼 선택 상태에서 손가락이 이동 시 같은 처음 위치에서 이벤트 발생 가능.