[React Native TIL] 객체 형태 데이터 CRUD

1. 상태 변수

    //input 창 텍스트 입력
    const [newTask, setNewTask] = useState('');

    //할일 목록 관리 상태 변수
    const [tasks, setTasks] = useState(tempData);

2. Create

    //목록 추가 함수
    const addTask = () => {
        if (newTask.length < 1) {
            // newTask 값이 빈 배열이면 addTask 함수 안돌아가도록 설정
            return;
        }
        const ID = Date.now().toString();
        const newTaskObject = {
            [ID]: { id: ID, text: newTask, completed: false },
        };
        setNewTask('');
        setTasks({ ...tasks, ...newTaskObject });
    };

💥주의. ID를 [ID]로 저장해야 한다.

• [ID]가 아닌 ID로 저장한 경우에는 ID가 문자 그대로 저장된다.
  

• ID로 저장한 createTask2함수는 ID:{id,text,completed}를 저장하고, [ID]로 저장한 createTask3함수는 고유한 id : {id,text,completed}를 저장한다.

3. Delete

    //목록 삭제 함수
    const deleteTask = (id)=>{
      // 현재 task를 복제한다.
        const currentTasks = Object.assign({}, tasks);
      //id가 같은 항목 삭제
        delete currentTasks[id];
        setTasks(currentTasks);
    }

Object.assign()이란? https://velog.io/@st4889/Object.assign%EC%9D%B4%EB%9E%80

delete 연산자는 객체(Object)의 속성을 제거한다. 배열 항목을 제거하는 것처럼 filter를 사용하거나 반복문을 사요할 필요가 없다.

4. toggle

    //목록 완료 함수 toggle
    const toggleTask = (id) => {
        const currentTasks = Object.assign({}, tasks);
        //선택된 id의 completed값을 반대로 설정
        currentTasks[id]['completed'] = !currentTasks[id]['completed'];
        setTasks(currentTasks);
    };

//completed의 boolen값에 따라 달라지는 icons
<IconButton icon={item.completed ? icons.check : icons.uncheck} 
id={item.id} onPress={toggleTask} />

4-1. toggle이 true일때는 수정이 안되도록 설정

{/* completed가 참이면 edit icons이 렌더링되지 않도록 설정 */}
{item.completed || <IconButton icon={icons.edit} />}

4-2. toggle이 true일 때 색깔 변동

completed의 boolen값에 의해 색 변경 및 text-decoration-line(밑줄) 그어지도록 구현

const Contents = styled.Text`
    flex: 1;
    font-size: 24px;
    color: ${({ theme, completed }) => (completed ? theme.done : theme.text)};
    text-decoration-line: ${({ completed }) => (completed ? 'line-through' : 'none')};
`;

5. Update(수정)

5-2.onBlur

TextInput 컴포넌트에서 포커스를 잃었을 때 호출되는 속성

만약 1번에서 입력이 종료되었을 때는 ''으로 바꿔준다.

onBlur={() => setNewTask('')} 

만약 2번에서 입력이 종료되었다면 원래 값으로 바꿔주고 편집모드도 껴줘야 한다.

onBlur={() => {
   setText(item.text);
   setIsEditing(false); //편집모드도 꺼줘야함
}}