안녕하세요! 2분 30초쯤 질문드립니다.

처음 배우는 리액트 네이티브

기능 구현하기 - 추가

작성

176

 const tempData: ITaskType = {
    1: { id: '1', text: 'React Native', completed: false },
    2: { id: '2', text: 'React', completed: true },
    3: { id: '3', text: 'Expo', completed: false },
  };

  const [newTask, setNewTask] = useState<string>('');
  const [tasks, setTasks] = useState<ITaskType>(tempData);

  const addTask = () => {
    if (newTask.trim().length === 0) {
      return;
    }

    const ID = Date.now().toString();
    const newTaskObject = {
      [ID]: { id: ID, text: newTask, completed: false },
    };

    setNewTask('');
    setTasks({ ...tasks, ...newTaskObject });
  };

  return (
    <ThemeProvider theme={basicTheme}>
      <Cotainer>
        <Title>Todo List</Title>
        <StatusBar barStyle='light-content' backgroundColor={basicTheme.theme?.background} />
        <Input
          placeholder='+ Add a Task'
          value={newTask}
          onChangeText={(text) => setNewTask(text)}
          onSubmitEditing={addTask}
          // onSubmitEditing : 키보드 완료버튼
        />
        <List width={width}>
          {Object.values(tasks)
            .reverse()
            .map((item) => (
              <Task text={item.text} key={item.id} />
            ))}
        </List>
      </Cotainer>
    </ThemeProvider>
);
 
강의에서는 이렇게 진행이 되었는데요.
 
Object.values를 찾아보니까 tasks의 value 값을 배열로 바꿔주더라구요.
 
저같은 경우는..
const tempData2= [
    {id:'1' , text:'React Native', completed:false},
    {id:'2' , text:'React Native2', completed:true},
    {id:'3' , text:'React Native3', completed:false}
]
const [tasks,setTasks] = useState(tempData2);
 
setTasks([ ...tasks, {id:ID , text:newTask,completed:false}]);
 
tasks.map((task) => <Task key={task.id} text={task.text} ></Task>)
 
 
처음부터 배열형식으로 하는 타입이라.. 혹시 배열타입이 아닌 오브젝트 형식에서 하신 이유가 있으신지 궁금합니다.
 
 

javascript react-native

답변 2

안주환

질문자

아하 이해가 되었습니다! 이유랑 예시까지 너무 감사합니다 ㅠㅠ 이번에 객체를 사용하여 사용해보도록 하겠습니다~ 친절한 설명 너무 감사드립니다~

김범준

지식공유자

안녕하세요 안주환님,

수정, 삭제시에 조금 더 편하게 항목을 검색하기 위해서 ID를 키로 사용했습니다.

예를들어, 다음과 같은 객체가 있다고 하겠습니다.

const obj = {
'1' : { id: '1', text: 'text1' },
'2' : { id: '2', text: 'text2' },
'3' : { id: '3', text: 'text3' }
}

ID가 2인 항목을 찾을때는 다음과 같이 코드를 작성합니다.
obj['2']

ID가 2인 항목의 text를 수정하기 위해서는 다음과 같이 작성하면 됩니다.
obj['2']['text'] = 'change text'

ID가 2인 항목을 삭제하는 경우 다음과 같이 작성하면 됩니다.
delete obj['2']

배열로 사용해 보겠습니다.
const arr = [
{ id: '1', text: 'text1' },
{ id: '2', text: 'text2' },
{ id: '3', text: 'text3' }
]

위와 동일하게 검색, 수정, 삭제를 위해 다음과 같이 작성해야 합니다.

arr.find(item => item.id === '2') // 검색
arr.find(item => item.id === '2')['text'] = 'changed text'; // 수정
arr.splice(arr.findIndex(item => item.id === '2'), 1); // 삭제

만약 find 함수를 모른다면, 특정 ID를 검색할 때 다음과 같이 filter를 이용하면 됩니다.

arr.filter(item => item.id === '2').pop()
혹은 arr.filter(item => item.id === '2')[0]

마지막 삭제도 splice대신 map을 사용해도 됩니다.

방법은 여러가지가 있습니다.

ID를 키로 하는 객체를 사용했을때와 차이점은 "원하는 특정 항목을 찾는 과정" 입니다.
객체로 처리하는게 조금더 편하다고 판단해서 객체로 진행했습니다.

그렇다고, 무조건 제가 선택한 방법이 옳고 좋은 방법은 아닙니다.
모든 방법에는 장단점이 있고, 정답은 하나가 아닙니다.
본인이 생각할때, 진행하는 프로젝트에 더 적합하다고 생각하는 방법을 이용하면 됩니다.

즐거운 하루 되세요

감사합니다.

인프런 커뮤니티 질문&답변

안녕하세요! 2분 30초쯤 질문드립니다.