생초보 react native로 App 만들기 도전 03 React 기초

리액트 기초

 

리액트 기초가 튼튼해야 리액트 네이티브도 잘할 수 있다고 하여... 

React native UI Component	Android View	iOS View	Web Analog	Description
<View>	<ViewGroup>	<UIView>	비스크롤링<div>	Flexbox, 스타일, 일부 터치 처리 및 접근성 컨트롤이 포함된 레이아웃을 지원하는 컨테이너
<Text>	<TextView>	<UITextView>	<p>	텍스트 문자열을 표시, 스타일 지정 및 중첩하고 터치 이벤트도 처리합니다.
<Image>	<ImageView>	<UIImageView>	<img>	다양한 유형의 이미지를 표시합니다.
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러 구성 요소와 보기를 포함할 수 있는 일반 스크롤 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있습니다.

 

첫 번째

Uar Cat

import React from 'react';
import {Text} from 'react-native';

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

 

React native UI Component <Text> 사용하여 Hello, I am your cat! 를 렌더링 한다.

 

Curly Braces

import React from 'react';
import {Text} from 'react-native';

const Cat = () => {
  const name = 'Maru';
  return <Text>Hello, I am {name}!</Text>;
};

export default Cat;

 

변수를 <Text>에 {}로 삽입 합니다.

Curly Braces

import React from 'react';
import {Text} from 'react-native';

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + ' ' + secondName + ' ' + thirdName;
};

const Cat = () => {
  return <Text>Hello, I am {getFullName('Rum', 'Tum', 'Tugger')}!</Text>;
};

export default Cat;

 

getFullName 함수를 <Text> Component에 {getFullName('Rum', 'Tum', 'Tugger')}로 호출 할 수 있다.

 

맞춤형  Component

중첩하여 Component를 서로 중첩하여 새 Component를 만들 수 있다. 이 것이 React 패러다임의 핵심이란다.

 

Custom Component

import React from 'react';
import {Text, TextInput, View} from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};

export default Cat;

 

<View>  (<div> Tag) Component 내부에 <Text>(<p> Tag),<TextInput> ( <input type="text"> )Component 중첩하면 이를 화면에 표시한다. 

 

Multiple Components

 

import React from 'react';
import {Text, View} from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
};

const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
};

export default Cafe;

 

React에서 Component는 함수를 호출 합니다.  <Cat />는 Cat함수를 호출 합니다.

다른 Component를 Rendering하는 Component는  parent component(상위 Component)  입니다. 
Cafe는   parent component(상위 Component) , Child(하위 Component) 입니다.

 

Rendering

Props

 

Props는 '속성( properties )'의 약자입니다. Props를 사용하면 React  Component를 사용자가 정의할 수 있습니다. 예를 들어, 여기서는 렌더링을 위해 각각 <Cat> Component에 다른 값을 Cat함수에 속성(Properties)으로 전달합니다 .

//Multiple Props
import React from 'react';
import {Text, View} from 'react-native';

const Cat = props => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
};

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
};

export default Cafe;

 

Rendering 결과

 

React Native의 핵심 구성 요소(Core Component) 대부분은 props를 사용하여 사용자 정의할 수도 있습니다. 예를 들어 를 사용할 때 표시되는 이미지를 정의하기 위해 <Image /> Component에 지정된 prop을 전달합니다 . 이는 'react-nativ'에 정의 되어 있는 함수의 속성으로 사용되어 렌더링 됩니다.

 

// Props
import React from 'react';
import {Text, View, Image} from 'react-native';

const CatApp = () => {
  return (
    <View>
      <Image   {/*Core Component */} 
        source={{  {/* Image 함수에 속성으로 전달됨 */}
          uri: 'https://reactnative.dev/docs/assets/p_cat1.png',
        }}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
};

export default CatApp;

 

Rendering

 

"Image"에는 디자인 및 레이아웃 관련 속성-값 쌍의 JS 객체를 받는 "style"과 같은 여러 가지 속성이 있습니다.

style의 너비와 높이 주변의 이중 중괄호 {{ }}에 주목하세요. JSX에서는 JavaScript 값이 {}로 참조됩니다. 이것은 문자열 이외의 것을 props로 전달할 때 유용합니다. 예를 들어 배열이나 숫자와 같은 것: <Cat food={["fish", "kibble"]} age={2} />. 그러나 JS 객체도 중괄호로 표시됩니다: {width: 200, height: 200}. 따라서 JSX에서 JS 객체를 전달하려면 객체를 또 다른 중괄호로 둘러싸야 합니다: {{width: 200, height: 200}}.

 

State

props는 Component의 렌더링 방법을 구성하는 데 사용하는 함수의 인수로 생각할 수 있지만 상태(State)는 Component의 개인 데이터 저장소와 같습니다.

 

State는 시간이 지남에 따라 변경되거나 사용자 상호 작용으로 인해 발생하는 데이터를 처리하는 데 유용합니다. 상태는 구성 요소에 메모리를 제공합니다!

 

다음 예는 두 마리의 배고픈 고양이가 먹이를 기다리고 있는 고양이 카페에서 발생합니다. 이름과 달리 시간이 지남에 따라 변경될 것으로 예상되는 배고픔은 State상태로 저장됩니다. 고양이에게 먹이를 주려면 버튼을 누르세요. 그러면 상태가 업데이트됩니다.

 

React의 useState Hook을 호출하여 Component에 State를 추가할 수 있습니다 . Hook은 React 기능을 "연결"할 수 있는 일종의 기능입니다. 예를 들어 useState함수 Component에 state를 추가할 수 있는 Hook이 있습니다. React 문서에서 다른 종류의 Hook에 대해 자세히 알아볼 수 있습니다 .

 

State

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

const Cat = props => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
      />
    </View>
  );
};

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

export default Cafe;

 

React Hook

개발 중 수 많은 컴포넌트들이 만들어지며,로직이 여러 LifeCycle에 흩어지고 밀접하게 결합되면서 컴포넌트 재사용을 못하고 중복된 컴포넌트들이 무수히 많이 생기게 되는 문제가 생기는 것이죠.

이런 문제를 해결하기위해 FaceBook에서 권고한 방법이 함수형 방식인 Hooks입니다!

useState :  Component의 시간에 따라 변하는 개인 데이터 저장소

Hooks 기본 구조   https://ko.reactjs.org/docs/hooks-intro.html

 

useEffect:  이벤트 처리는 'useEffect'를 사용하면 됩니다!

                 

                 Component가 랜더링 될 때 특정 작업을 실행. 랜더링은  Component가 mount(처음 나타날떄) 될때,
                 unMount(사라질 때), 그리고 Update(특정 props가 바뀔때) 실행됨.  

https://ko.reactjs.org/docs/hooks-effect.html

 

useRef : 

               저장공간 또는 DOM요소에 접근하기 위해 사용됨.
               javascrip에서 querySelector를 사용하는 것처럼, react에서 DOM객체를 직접선택 할 때 사용됨.

 

useMemo: 특정값을 재사용 memo는 meomization로 이전헤 계산 값을 메모리에 저장함으로써 동일한 계산의 반복 수행
                 제거 하여 프로그램 속도 향상

 

useCallback: 특정함수를 재사용