[React-native] 컴포넌트

 

👩‍💻  Component

 

---

 

 

📌Component - JSX 기초

✏️ JSX

: JSX란?

객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능.
JSX는 가독성이 높고 작성하기 쉬울 뿐만 아니라, XML과 유사하다는 점에서 중첩된 구조를 잘 나타냄

 

 

✏️ JSX 특징

:JSX의 특징을 알아보자.

• XML 과 유사하다는 점에서 중첩된 구조 표현 가능
• <View>는 UI를 구성하는 가장 기본적인 요소(<div>와 비슷)
•  <View> 대신 <Fragment> 컴포넌트나 <></> 사용가능
• 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 함

 

✏️ JSX에서의 "하나의 부모"

:하나의 부모란 무엇을 의미할까?

 

"View"는 UI를 구성하는 가장 기본적인 요소로, 웹 프로그래밍에서 <div>와 비슷한 역할을 한다.

JSX에서는 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 한다.

아래의 예시를 보자.

 

"JSX에서는 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 한다."

위의 코드와 아래의 코드 차이는 "<View/>"의 차이이다.
하나의 부모로 감싸지 않은 2번째 코드는 오류가 발생하는 것을 볼 수 있다.

 

 

<Fragment>를 사용한 모습

<Fragment> 단축문법

 

 

✅ <Fragment>
:View 컴포넌트처럼 특정역할을 하는 컴포넌트로 감싸지 않고, 여러개의 컴포넌트를 반환하고 싶은 경우 Fragmet 컴포넌트를 사용한다.

Fragment 컴포넌트를 사용하기 위해 import를 이용하여 불러오고, View 컴포넌트 대신 Fragment 컴포넌트를 사용하도록 했다.

두 번째 사진은 단축 문법을 제공한 모습이다. import가 다르니 주의하자!

 

 

 

 

 

📌Component - JSX 문법

✏️ 자바스크립트 변수

:JSX는 내부에서 자바스크립트의 변수를 전달하여 이용할 수 있다.

아래의 예제를 보자.

"JSX에서는 변수를 중괄호{}를 사용하여 화면에 표시한다."

 

 

✏️ 자바스크립트 조건문

:자바스크립트의 조건문을 이용해보자.

 

1️⃣ "if 조건문"

JSX 내부에서 if문을 사용할 수 있습니다만, if문을 즉시실행 함수 형태로 작성해야 합니다.

아래의 예제를 봅시다.

 

출력

 

2️⃣"삼항 연산자"

출력

 

3️⃣ "AND" 연산자와 "OR"연산자

출력

 

 

JSX에서 flase는 렌더링 되지 않기 때문에, AND 연산자 앞의 조건이 참일 때 뒤의 내용이 나타나고, 거짓인 경우 나타나지 않는다.

React-Native에서 "null"은 지원하지만, "undefined"는 지원하지 않는다.

 

 

✏️ 자바스크립트 주석

:자바스크립트의 주석을 이용해보자.

주석은 자바와 같다
1.    /* */
2.   //

 

 

 

✏️ 스타일링

:자세한 내용은 4장에서 알아볼 것이지만, 이번에는 간단히 "인라인 스타일링"을 알아보자.

JSX에서는 style에 문자열로 입력하는 것이 아니라 객체 형태로 입력해야한다.
그리고 하이픈(-)으로 연결된 이름은 하이픈을 제거하고 카멜표기법으로 작성해야한다.
background-color   -> backgroundCorol

 

 

 

 

 

📌Component 

✏️ 내장 컴포넌트

:Basic Component

 

 

 

✏️Button 예제

출력

 

버튼 클릭 시

const app = () => {}
export default app;

:이 파일에서는 app이라는 이름의 화살표 함수를 정의하고, 이를 default로 export하고 있습니다. 즉, 다른 파일에서 import할 때 기본으로 사용할 함수 또는 객체로서 app 함수를 제공합니다.

 

• <Button>: React Native에서 제공하는 버튼 컴포넌트를 나타냅니다. 이 컴포넌트는 터치 가능한 버튼을 만들어주며, 사용자의 입력에 반응할 수 있도록 합니다.
• title="Button": 버튼에 표시될 텍스트를 설정합니다. 이 코드에서는 버튼에 "Button"이라는 텍스트가 표시됩니다. 즉, 버튼의 레이블이 "Button"이 됩니다.
• onPress={() => alert("Click !!!!")}: 버튼이 눌렸을 때 실행될 함수를 설정합니다. 여기서는 버튼이 눌렸을 때 "Click !!!!"라는 경고창이 표시되도록 설정되어 있습니다.
  • () => alert("Click !!!!") 부분은 클릭 이벤트가 발생했을 때 실행될 함수를 정의하는 부분으로, 여기서는 경고창을 띄우는 함수가 실행되도록 설정되어 있습니다.

 

 

이 파일에서는 App.js 내부에서 app.js 파일의 app 함수를 import하여 App으로 export하고 있습니다. 이렇게 하면 다른 파일에서 App.js를 import할 때, App 함수가 기본으로 제공됩니다.

따라서 두 파일은 서로 관련이 있으며, app 함수가 App으로 export되고 다른 곳에서 사용될 수 있도록 설정하고 있습니다.

 

 

 

✏️ 커스텀 컴포넌트 만들기

:Button 컴포넌트를 대체 할 MyButton 컴포넌트를 생성해보자.

 

 

src/components/MyButton.js

src/app.js

Basic Component로 지원하는 Button을 제거하고, import를 통해 Mybutton을 불러와주자.

App.js

app.js import 

출력

MyButton 클릭 시 버튼 작동

 

src/components/MyButton.js

출력

MyButton에서 style을 통해 Button의 속성을 바꿔보자

 

 

 

 

 

📌props and state - props

✏️ props

:부모 컴포넌트로부터 전달받은 속성값 혹은 상속받은 속성값

"props"란
properties를 줄인 표현으로,  부모 컴포넌트로부터 전달받은 속성 값이다.
자식 컴포넌트에서는해당 props를 사용할 수 있지만 변경하는 것은 불가능하다.

 

<Button title="Button" />

함수 뒤 매개변수 자리에 props를 넣여주어야 함

MyButton.js

 

 

출력

app.js에서 지정한 Button "title"속성을 가져와서 사용함

자식 컴포넌트에서는 부모로부터 전달된 props를 함수의 파라미터 parameter로 받아서 사용할 수 있음

 

 

 

✏️children props

:컴포넌트의 태그 사이에 전달된 값은 props.children으로 전달

 

첫번째 MyButton의 경우 props.children이 정의가 되지않았다.(title인 Button을 출력)



출력

 

위의 MyButton의 경우 props.childre이 정의되어있다.(Children Props)
즉, props에 children이 있다면 title보다 우선시되도록 작성했다. (버튼 text가 title로 안만들어짐)
-   children Props와 Button 출력
-   children은 모든 하위 컴포넌트를 포함

 

 

 

 

✏️defaultProps

:만약 사용해야 하는 값이 props로 전달되지 않으면 어떻게 될까?

 

MyButton 컴포넌트에서 Text 컴포넌트에 title 혹은 children을 렌더링하도록 했지만, 어떤 값도 전달되지 않았기 때문에 빈 버튼이 나타난다.

 

 

 

 

 

 

📌props and state - useState

✏️ useState

:useState 함수를 호출할 때 파라미터에 생성되는 상태의 초기값을 전달

 

useState는 상태를 관리하는 변수와, 그 변수를 변경할 수 있는 세터함수를 배열로 반환한다.
상태 변수는 직접 변경하는 것이 아닌 useState 함수에서 반환한 세터 함수를 이용해야한다.

 

<목표>
-  count 변수를 0으로 초기화
-  setCount 세터 함수 생성
-  +1버튼 클릭시 현재 count 값에서 1씩 증가
-  -1버튼 클릭시 count 값에서-1 씩 감소
-  Text 컴포넌트를 이용해서 현재 count 값 출력

Counter를 import한 뒤, View안에 붙여주었다.

App.js에서 App2로 import

 

 

 

 

 

 

✏️ 여러개의 useState

:컴포넌트에서 관리해야 하는 상태가 여러 개일 수 있는데, 이런 상황에서는 useState를 여러번 사용하는 것도 가능하다.

관리해야 하는 상태의 수만큼 useState를 사용하면 된다.

 

 

 

 

 

 

 

📌 이벤트

✏️ press 이벤트

: 사용자가 특정 컴포넌트를 클릭했을 때 호출되는 onClick 이벤트와 유사

 

•  OnPressIn ▶ onPressOut ▶ onPress(?0
• OnPressIn ▶ onLongPress 순으로 호출,
• Press ▶ onPressOut 순으로 호출, onPressIn과 onPressOut은 항상 호출
•  onPress와 onLongPress는 사용자가 클릭하는 시간에 따라 둘 중 하나만 호출

 

Press 예제


delayLongPress를 추가해보자(아래의 코드)

 

 

 

delayLongPress : onLongPress가 호출되는 시간을 조절
(값이 3000이면 3초 동안 클릭하고 있어야 onLongPress 호출됨)

 

 

 

✏️ onChange 이벤트

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

 

 

 

입력 전

입력 후

 

 

 

 

✏️ Pressable 컴포넌트

:TouchableOpacity 컴포넌트처럼 사용자의 터치에 상호 작용하는 컴포넌트

• press 이벤트도 동일, 동작 방식도 유사함, 차이점은 HitRect와 PressRect
• HitRect (클릭시작범위)
  • 의도하지 않은 버튼을 클릭하거나 버튼을 클릭하는 것 자체가 어려울 수 있을 때 버튼 모양보다 약간 떨어진 부분까지 이벤트가 발생할 수 있도록 함
• PressRect(슬라이딩가능한범위)
  • 버튼을 클릭했을 때 해당 버튼이 동작하지 않게 하기 위해 버튼을 누른 상태에서 손가락을 이동시킬 경우 버튼 클릭 유지 범위
  •  버튼을 누른 상태에서 PressRect 영역을 벗어나면 버튼 클릭 해지됨