TIL 12.30

react native

리액트로 핸드폰 어플 프론트엔드 개발하기 생각보다 재밌다...
todoList 핸드폰에 만들기 실습
이젠 안보고 스스로 하는 게 목표!

1. 내용 추가하기

• addTodo 함수 만들기
• 추가된 리스트 출력하기

// 자료구조 잡기
const newTodo = {
	id=Date.now(),
    text,
    isDone=false,
    isEdit=false,
    category,
}

// useState
const [todos, newTodos] = useState([])
const [text, newText] = useState("")
const [category, newCategory] = useState("")

// addTodo 함수
const addTodo = (prev) => {
	setTodo(prev => [...prev, newTodo])
    setText("")
}

// return 부분!
<TextInput>
	onPress={addTodo}
    onChangeText={setText}
    value={text}
    placeholder="내용을 입력하세요"
</TextInput>
<ScrollView>
	{todos.map(todo) =>
	<Text>{todos.text}</Text>
    }
</ScrollView>

prev값을 불러와서 같이 출력해야하는거 잊지말자...!

2. category별로 다른 내용 출력하기

• 버튼 세 개 만들기 예시에선 javascript 하나만
• seCategory 리턴문에 바로 달아주기

<touchableOpacity
	onPress={ setCategory("")}
    style={{...styles.tab, backgroundColor: category === "js" ? "blue" : "gray",
    }}
>
	<Text>javascript</Text>
</touchableOpacity>

// return - 필터로 먼저 카테고리를 나눠주고 카테고리에 맞는 todo 출력
{todos.map(todo) => {
	if(category === todo.category) {
    return(
    	<View>
        	<Text>{todo.text}</Text>
        </View>
    )
    }
}

3. 완료상태 변경하기

• setDone함수로 isDone상태 토글링

const setDone = (id) => {
	// id를 매개변수로 받고
    // setTodos를 위해 newTodos로 얕은 복사
    // 선택된 todo의 index를 idx로 새로 선언
    // todos[idx]의 isDone값을 !해서 토글링
    // setTodos에 newTodos 저장
    const newTodos = [...todos]
    const idx = newTodos.findIndex((todo) => todo.id === id)
    todos[idx].isDone = !todos[idx].isDone
    setTodos(newTodos)
}

// return 완료 이모티콘도 첨부해줌
<touchableOpacity onPress{()=>setDone(todo.id)}>
	<FontAwesome name='check-circle' size={24} color='black' />
</touchableOpacity>

복사해온 배열에서 findIndex 메소드를 쓰고 그 안에 콜백함수를 넣어주는 형태! 그게 잘 안됐다.