개발새발, 써놓기

ScrollView는 여러 컴포넌트와 view를 담을 수 있는 스크롤되는 container

https://reactnative.dev/docs/using-a-scrollview

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

const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64,
};

// 아래로 스크롤바를 밀어서 페이지 이동할 수 있다. 
// pagiongEnabled prop을 넣으면 swipe 될 때 scroll view의 size 몇 개를 넘기고 멈춘다. 
// 자세한 사항: https://reactnative.dev/docs/scrollview#pagingenabled
// maximumZoomScale, minimumZoomScale prop을 통해서 사용자가 줌인, 줌아웃 가능하게 할 수도 있음.
// 화면에 맞지 않는 긴 리스트가 있다면 FlatList 사용 권장
const App = () => (
  <ScrollView>
    <Text style={{fontSize: 96}}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 80}}>React Native</Text>
  </ScrollView>
);

export default App;

FlastList 변하지만 구조적으로 유사한 데이터의 스크롤되는 리스트를 담는 컴포넌트. 시간이 지남에 따라 변하는 아이템이 있는 데이터의 긴 리스트에 잘 작동한다.

★ 일반적인 ScrollView와 달리 화면에 현재 보이는 요소들만 렌더링한다. 한 번에 모드 요소를 렌더링하지 않음. ★

FlastList 컴포넌트는 data와 rederItem 두 가지의 prop이 필수이다. data는 리스팅할 데이터. renderItem은 데이터에서 하나 꺼내서 렌더링되는 컴포넌트를 돌려준다. 

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        // 데이터들을 전부 Text 컴포넌트로 렌더링 된다. 
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
};

export default FlatListBasics;

section header 를 통해 논리적으로 구분되는 데이터를 렌더링하고 싶으면 SectionList를 사용할 수 있다.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const SectionListBasics = () => {
  return (
    <View style={styles.container}>
      <SectionList
        sections={[
          {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
          {
            title: 'J',
            data: [
              'Jackson',
              'James',
              'Jillian',
              'Jimmy',
              'Joel',
              'John',
              'Julie',
            ],
          },
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({section}) => (
          <Text style={styles.sectionHeader}>{section.title}</Text>
        )}
        keyExtractor={item => `basicListEntry-${item}`}
      />
    </View>
  );
};

export default SectionListBasics;

list view 공통의 특징으로 서버에서 가져오는 데이터를 보여준다. 

서버에서 가져오는 데이터에 관한 자세한 문서: https://reactnative.dev/docs/network 

Text input은 사용자가 글을 입력할 수 있게하는 핵심 컴포넌트.

onChangeText: 텍스트가 변할때마다 호출되는 함수

onSubmitEditing: submit될 때 호출되는 함수

https://reactnative.dev/docs/handling-text-input

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

const PizzaTranslator = () => {
  // text는 시간에 따라 변하므로 state에 저장한다.
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  );
};

export default PizzaTranslator;

※ 변하는 것만 re-render 한다.

https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable 

// AS-IS
function App() {
  /* 여기에서 키보드 타자를 칠 때마다 (onChange될 때 마다) 
     setFirstName 을 통해 함수를 호출하고 다시 렌더링 되는데, 
     re-rendering performance를 최적화 하기 위해서는,
     <PageContent /> 는 input의 state에 영향을 받지 않으므로
     input의 state를 다루는 컴포넌트를 따로 만든다. */
  const [firstName, setFirstName] = useState('');
  return (
    <>
      <form>
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      </form>
      <PageContent />
    </>
  );
}

// TO-BE
function App() {
  return (
    <>
      <SignupForm />
      <PageContent />
    </>
  );
}

function SignupForm() {
  const [firstName, setFirstName] = useState('');
  return (
    <form>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
    </form>
  );
}
/* 이 경우 performance가 상당히 향상되는데, 
   이제는 키입력에 따라 onChange 이벤트가 호출될 때,
   SignupForm만 다시 렌더링하기 때문이다. */

https://reactnative.dev/docs/intro-react

공식문서 읽고 공부...:) 

The Basics

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

// 컴포넌트는 함수로 시작.
const Cat = () => {};
// 컴포넌트를 청사진으로 간주. 함수 컴포넌트가 return하는 무엇이든간에 React element로 랜더링 된다.
// React element는 스크린에 보고싶은 것을 묘사해줌.

// 예시로 <Text>를 렌더링하는 Cat 컴포넌트.
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

// export default를 통해 어플에 걸쳐서 사용할 수 있게 export 할 수 있다. 
export default Cat;

Curly Braces

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

// 중괄호{} 안에 변수 값을 넣을 수 있다. 
const Cat = () => {
  const name = 'Maru';
  return <Text>Hello, I am {name}!</Text>;
};

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

// 중괄호{} 안에 함수를 넣을 수 있다.
const Cat = () => {
  return <Text>Hello, I am {getFullName('Rum', 'Tum', 'Tugger')}!</Text>;
};

export default Cat;

이런 JSX 문법은 React library안에 있는 것이므로 import React from 'react' 를 작성하지 않으면 기능하지 않는다. 

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

const Cat = () => {
  return (
  // <View>안에 <Text>와 <TextInput>을 들여쓰면 React Native는 함께 랜더링 한다. 
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};

export default Cat;

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

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

// 다른 컴포넌트를 렌더링하는 컴포넌트를 parent component라고 한다.
// 여기에서는 Cafe가 parent component이고, Cat이 child component이다. 
const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
    /* Cat 컴포넌트를 <Cat> 을 사용함으로써 여러번 렌더링 시킬 수 있다.  */
  );
};

export default Cafe;

import React from 'react';
import {Text, View} from 'react-native';
//Props는 properties의 줄임말로 Props를 통해 React component를 커스터마이징 할 수 있다.

// 각각의 Cat이 다른 name을 갖게 하는 예제이다. 
type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  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;

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

const CatApp = () => {
  return (
  /* <Image>를 사용할 경우 source라는 prop을 이용한다. 
     {{ }} 를 주목해보면 두 개의 중괄호가 있다.
     JSX에서 JavaScript 값은 {}로 참조되는데, 이것은 문자열보다 props로 넘길 때 유용하다.
     하지만 JS오브젝트 또한 중괄호로 표시된다. 
     따라서 JS오브젝트를 JSX에서 넘길 때 {}로 감싸게 된다.*/
    <View>
      <Image
        source={{
          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;

State

컴포넌트가 어떻게 보여지는지 설정하는데 사용하는 argument --> props

컴포넌트의 개인 데이터 저장소 --> state

state는 사용자와의 상호작용에서 혹은 시간이 지남에 따라 변화되는 데이터를 다루는데 유용하다.

state는 컴포넌트에게 기억할 수 있게 한다. 

--> 시간이 지남에 따라 변화될 것이라고 생각되는 컴포넌트 데이터를 추적하는데 state를 쓴다. 

예시로, cat cate에서 두마리의 배고픈 고양이가 있고 시간이 지남에 따라 허기의 상태가 달라질 것임. 밥주기 버튼을 누르면 배고픈 고양이가 배불러지는 상태로 변경된다.

컴포넌트에 state를 추가하는 방법은 React's useState Hook을 부르는 것이다. Hook 이란 함수가 React 의 특징으로 채여지는 것. 예를 들어 useState는 함수 컴포넌트에 state를 추가하는 Hook이다. 

// useState를 import한다.
import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  /* 시간이 지남에 따라, 혹은 사용자와의 상호작용을 통해 변화될 것이라고 생각되는 데이터에 useState
     useState는 문자열, 숫자, Boolean, 배열, Object 어느 데이터라도 추적하는데 사용된다.
     useState는 초기 값으로 상태 변수를 만드는데, 여기서 isHungry라는 상태변수의 초기 값은 true이다.
     어떻게 이름을 짓는 상관 없는데, 아래의 패턴으로 하면 편리하다.
     [<getter>, <setter>] = useState(<initialValue>)
     
     useState를 통해 isHungry 라는 상태 변수를 만든다. */
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}!
      </Text>
      
      <Button
        //Button에 onPress라는 Prop을 줘, 누구든 버튼을 누르면 onPress가 fire하고, setIsHungry(false)를 부른다.
        onPress={() => {
          setIsHungry(false);
        }}
        // isHungry가 false면 Button의 disabled prop이 true가 되어 타이틀이 바뀐다. 
        disabled={!isHungry}
        title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
      />
    </View>
  );
};

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

export default Cafe;

※ isHungry가 const임에도 재할당이 가능하다. state-setting function이 불러질 때 컴포넌트가 다시 랜더링되고, Cat function이 다시 실행된다.