TIL 10주 1일차

리액트 네이티브

 

버튼 -> 

<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

 

 

리액트 네이티브에선 보통 버튼을 안 쓰고 touchableopacity 사용

 

---

[onChangeText]

프로젝트를 진행하다가 간단한 input데이터를 state에 저장하고 싶어서 찾아보다가 onChangeText라는 속성에 대해 알게됐다.

보통 input데이터를 뽑아오기 위해서는 onChange속성의 value값을 뽑아서 다시 그 value값을 state에 저장한다. 하지만, onChangeText의 반환값은 text 단 하나로 오직 내가 쓴 input데이터를 뽑아올 때 오기 편하다.

 

비교

📌onChange

• 반환 값

onChange의 event를 뽑아보면 아래와 같이 세 개의 값을 반환한다. 그 중 input데이터는 text라는 변수에 저장되어 있는걸 볼 수 있다.

• 사용법

...
const [name, setName] = useState('')

return (
  <TextInput
    value={name}
    onChange={(event) => {
        const {eventCount, target, text} = event.nativeEvent;
        setName(text);
      }
    }
)

📌onChangeText

• 반환 값
  onChangeText는 오직 text만을 반환한다.
  
• 사용법

...
const [name, setName] = useState('')

return (
	<TextInput onChangeText={text => setName(text)}  
)

 

 

[onSubmitEditing]

onsubmithandler 역할

 

 

-----

filter하고 map함수를 돌리는거보다는 map함수 다음에 if문으로 걸러내는게 더 효율적

filter하고 map은 배열 끝까지 다 돌림

-------

 

---

TodoList 만들기

 

const [todos, setTodos] = useState([]);

const [category, setCategory] = useState("js"); // 카테고리는 js, react, ct 로 구분

const [text, setText] = useState("");

1. 빈 배열인 todos를 만든다

2. 항목을 누를 때마다 state값을 js, react, ct 로 바꾸기 위한 category를 만든다

3. TextInput창에 value 값을 저장할 text를 만들어준다.

 

const newTodo = {

    id: Date.now(),

    text,

    isDone: false,

    isEdit: false,

    category,

  };

TextInput창에 입력한 내용이 들어갈 배열을 만든다.

 

const addTodo = () => {

    setTodos((prev) => [...prev, newTodo]); //기존 todo값에서 접근

    setText("");

  };

 

 

 

---

토글링 / 비동기 async, await

비동기 통신의 return값은 프로미스 객체다

await axios === axios.then

 

---

action creators -> action 객체를 return 하는 함수

reducer-> state와 action을 정의해놓은 함수