[Nomard] React Native - To Dos

이번에 할 것은 단순 자바스크립트이다.
object를 이용한 투두 자료를 state 로 갖고 있는 것.

const [text, setText] = useState('');
const [toDos, setToDos] = useState({});

const submitToDo = () => {
  if (!text) return;
  else {
    const newToDos = Object.assign({}, toDos, { [Date.now()]: { text, work: tab === 'work' } });
 // const newToDos = Object.assign({},toDos,{[Date.now():{text, work:working}]})
    alert(text);
    setToDos(newToDos);
    setText('');
        }
    };

여기서 봐야할 것은Object.assign 이다. 이를 활용해 object 를 합칠 수 있게 된 것이다.

const newToDos = {...toDos,[Date.now()]: { text, work: tab === 'work' } }

assign이 헷갈린다면
ES6문법으로 볼 수 있다, 위와 같은 내용이다.

그리고 해당 toDos 들을 다른 컴포넌트로 옮겨서 렌더링 해보자.

const Contents = ({ toDos }) => {
    return (
        <ScrollView>
            {Object.keys(toDos).map((key) => (
                <Text
                    key={key}
                    style={styles.contentText}
                >
                    {toDos[key].text}
                </Text>
            ))}
        </ScrollView>
    );
};

object 들을 가지고 key 값 배열을 만든 후 렌더링 한 코드이다.