[ 스파르타 / TIL ] 내일배움캠프 #32

오늘 한 것

---

• 알고리즘 문제 풀기
• Redux 강의 보기
• Todo list 코드 리뷰 받기

 

 

오늘 깨달은 것

---

최원장 튜터님께 저번에 리액트로 만든 Todo list 코드 리뷰를 부탁드렸는데 리뷰받기를 정말 잘한 것 같다. 덕분에 아래와 같은 사항들을 새롭게 알게 되었다!

 

리액트에서 .js 파일은 .jsx로 쓰자.

index.js 파일만 제외하고 나머지 App.js와 내가 만든 js파일들은 모두 .jsx로 써주자. index.js를 변경하지 않는 이유는 이 파일은 자바스크립트 코드이므로 js로 유지되어야 한다.

 

 

버튼에는 cursor: pointer;을 설정해주자.

사용자들에게 버튼이라는 것을 인지하게 클릭이 가능하다는 것을 인지하게 하기 위해서는 항상 설정해주도록 하자.

 

 

입력창의 값이 둘 중에 하나라도 비어있다면 alert창이 뜨게 하자.

함수형 컴포넌트이기 때문에 alert을 해준 뒤에는 return을 해주어야 한다. 그렇지 않으면 alert은 떠도 코드는 여전히 실행이 된다.

  // 입력 값 체크
  if (!inputTitle || !input) {
    return alert('제목 또는 내용이 입력되지 않았습니다.');
  }

 

 

import에서 내가 쓴 컴포넌트는 제일 하단에 두자.

아래는 원래 내가 App.jsx에 섰던 Import 순서이다.

// 수정 전
import React, {useState} from 'react';
import './App.css';
import Header from './component/Header';
import Form from './component/Form';
import TodoList from './component/TodoList';
import {v4 as uuidv4} from 'uuid';

 

하지만 아래처럼 내가 만든 컴포넌트들은 모아서 제일 하단에 적으라고 하셨다. 'react'나 다른 Import들은 변경할 일이 잘 없으니까 제일 위에 적고 앞으로 컴포넌트들은 계속 추가되거나 변경이 될 수 있기 때문에 하단에 적으라고 하셨다.

// 수정 후
import React, {useState} from 'react';
import './App.css';
import {v4 as uuidv4} from 'uuid';

import Header from './component/Header';
import Form from './component/Form';
import TodoList from './component/TodoList';

 

 

useState를 적을때 필요한 파일에만 적어주자.

아래의 코드는 원래 App.jsx에 적혀 있었다. 하지만 실제로 inputTitle과 input을 받는 곳은 Form.jsx파일이기 때문에 App에서는 필요가 없는것이었다. 그래서 App에서는 지워준뒤 Form으로 이동시켜 주었다. 

  const [inputTitle, setInputTitle] = useState('');
  const [input, setInput] = useState('');

 

useState를 Form파일안에 선언을 하니 파라미터로 보낼 필요도, 받을 필요도 없기 때문에 두 파일(App, Form)의 코드가 훨신 깔끔해졌다. 

 

 

setState에서 prev를 사용해보자.

원래 코드에서는 아래와 같이 적었다.

setTodos([...todos, {id: uuidv4(), title: inputTitle, context: input, isDone: false}]);

 

하지만 setTodos의 prev를 사용하여 훨씬 간결하게 코드를 쓰는 방법을 알려주셨다. 아래의 코드는 ...todos 대신에 ...prev로 지금까지의 리스트들을 가져온다. 아래와 같이 쓰는 이유는 props는 최대한으로 줄이는게 좋기때문이다. 햇갈릴 수 있기 때문에.

setTodos((prev) => [...prev, {id: uuidv4(), title: inputTitle, context: input, isDone: false}]);

덕분에 Form.jsx에서 아래와 같이 받아오고 있었는데

const Form = ({todos, setTodos}) => { ... }

 

아래와 같이 간결해졌다.

const Form = ({ setTodos}) => { ... }

 

 

같은 코드를 두번 쓰지 않도록 하자.

같은 코드를 두번 쓰는 것은 비효율 적이다. 원래 아래와 가이 TodoList.js에서 Working, Done 부분을 <h2>xo

<TodoList todos={todos} setTodos={setTodos} />

 

 

 <div className='list-container'>
      <h2 className='list-title'>Working..🔥</h2>
      <div className='list-wrapper'>{checkDone(todos, false)}</div>
      <h2 className='list-title'>Done..!🎉</h2>
      <div className='list-wrapper'>{checkDone(todos, true)}</div>
</div>