2주차 리액트 투두리스트 만들기 회고

• Falsy; 거짓으로 간주된 값

  • false
  • 0
  • -0
  • 0n
  • ""
  • null
  • undefined
  • NaN

• ... 문법

  // 수정전
  setState({
      toDoInput: '',
      toDos: [newToDo, ...toDos],
    });
  
  // 수정후  
  setState({  
    	toDoInput: '',  
    	toDos: [...toDos, newToDo],  
    });
  
  

• ★ 리액트에서 input 상태관리
  
  • input 태그
    
    • value
    • onChange
  • input 태그의 onChange 관련 handler; handleToDoInput

 // App 컴포넌트
 
 function App(){
  const [state, setState] = useState({
    toDoInput: '',
    toDos: [],
  });

  const { toDoInput, toDos } = state;

  function handleToDoInput(e) {
    const { name, value } = e.target;
    setState({
      ...state,
      [name]: value,
    });
  }
  
  ...
  
 }

 

• 자주 쓰이는 메서드 중 완벽히 알아야할 것
  • map() 반환값-배열
  • filter() 반환값-배열
  • length
• 명료한 이름
  • toDoList → toDos
• 불필요한 메서드 사용하지 않기
  • slice( )

//수정 전
const newToDo = {
id: Math.random() + 1,
text: toDoInput.slice(),
}

// 수정 후
const newToDo = {
id: Math.random() + 1,
text: toDoInput,
}

• uuid 라이브러리의 uuidv4()
고유한 하나의 객체 toDo를 생성하기 위해 프로퍼티 'id'에 uuidv4()를 사용해서 랜덤한 값을 할당했다.

 

 

이번 과제 'input 상태관리' 랑 '...문법' 때문에 헤맸다.. ㅜㅡㅜ

 

전체코드

https://github.com/Joylish/week2-assignment-2

Joylish/week2-assignment-2

 

참고자료

falsy 개념 (https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
uuid 라이브러리 (https://github.com/uuidjs/uuid)