처음 배우는 리액트 네이티브 책을 필요한 부분만 정리

3장 컴포넌트

3.1 JSX

3.1.1 하나의 부모

여러 요소를 반드시 하나의 부모로 감싸야 함

3.1.2 자바스크립트 변수

내부에서 자바스크립트 변수를 전달하여 사용할 수 있음

export defualt function App(){
	const name = 'mk'
	return (
		<Text>My name is {name}</Text>
    	);
  	}

3.1.3 자바스크립트 조건문

if 조건문

if문을 즉시 실행 형태로 작성해야함.

삼항 연산자

AND / OR 연산자

3.1.4 null 과 undefined

JSX 의 경우 null 은 허용, undefined 는 오류 발생한다는 점 유의

3.1.5 주석

{/* 주석을 작성하는 방법 */}
<Text // 태그 안에서 주석 작성 
  />
<Text /* 태그 안에서 주석 작성 */ />
  

3.1.6 스타일링

인라인 스타일링

export defualt function App(){
	const name = 'mk'
	return (
		<View
          style={{
            flex: 1,
            backgroundColor: '#fff',
          }}
          ></View>
    	);
  	}

style 에 문자열로 입력하는 것이 아닌 객체 형태로 입력
background-color 처럼 하이픈 연결은 하이픈 제거하고 카멜 표기법으로 작성

3.2 컴포넌트

3.2.1 내장 컴포넌트

• 리액트 네이티브 컴포넌트: https://reactnative.dev/docs/components-and-apis

대표적으로 Button 컴포넌트 있음

3.2.2 커스텀 컴포넌트

컴포넌트 새로 만들 수 있음
export defualt MyButton;
이런 식으로 export 후 사용

3.3 props 와 state

3.3.1 props

props: properties 를 줄인 표현으로 부모 컴포넌트로부터 전달된 속성값 혹은 상속 받은 속성값을 말한다. 자식 컴포넌트에서 변경하는 것은 불가능.

<MyButton title="Button" />

이렇게 전달하면 MyButton 컴포넌트의 props로 title이 전달됨

const MyButton = props => {
  return (
  	<Text> {props.title} </Text>
    );
};

이런식으로 확인 가능
태그 사이 값은 props.children 으로 전달

defaultProps

Name.defaultProps = {
    name: '이름',
};

이런 식으로 아무것도 없을 때 기본 값 지정 가능

propTypes

필수적으로 전달, 잘못된 타입 등 지정하여 오류 메세지 전달 가능

3.3.2 state

state 는 컴포넌트 내부에서 생성되고 값을 변경할 수 있음. 이를 이용해 컴포넌트 상태를 관리 (state) 상태가 변하면 컴포넌트 리렌더링 됨.

useState

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

useState는 상태를 관리하는 변수와 그 변수를 변경할 수 있는 세터함수를 배열로 반환한다. 상태 변수는 직접 변경하는 것이 아닌 세터 함수를 이용해야함. useState 파라미터에 값을 전달하면 초깃값을 전달할 수 있음.

3.4 이벤트

3.4.1 press 이벤트

onClick 이벤트와 가장 유사한 리액트 네이티브 이벤트: press

• onPressIn : 눌렀을 때
• onPressOut : 터치 해제
• onPress : 터치 해제, onPressOut 이후 호출
• onLongPress : 일정 시간 이상 눌렀을 때

onPress 와 onLongPress는 누른 시간에 따라 둘 중 하나만 호출된다.

3.4.2 change 이벤트

값을 입력하는 TextInput 컴포넌트에서 많이 사용된다.

3.4.3 Pressable 컴포넌트

리액트 네이티브 0.63 이상 버전에서 사용
press 이벤트 동일하게 존재, 동작 방식도 같음
기존 컴포넌트와 다른 특징은 HitRect, PressRect

• HitRect: 약간 떨어진 부분까지 눌렀다고 인식되도록 (모바일에서 버튼 작아서)
• PressRect: 버튼을 누르고 멀어졌을 때, 버튼을 누른 상태에서 벗어났다고 인식하도록 하는 범위 (실수로 눌렀을 때 대비)

hitSlop 속성을 주면 됨 (HitRect 끝에서 PressRect 시작)