TIL:: Today I Learned

1. Facts (사실, 객관)

• 리액트 CS 작성 완
• 프로그래머스 0단계 코테
• 리액트 개인과제 리뷰
• 리액트 개인과제 리팩토링
  1. todoList 리뷰 반영
  2. src/pages폴더 추가

https://console-log.tistory.com/114 

리액트 기초과정 CS

https://console-log.tistory.com/118

[프로그래머스 Lv. 0] 2차원으로 만들기

https://github.com/lizzieFEstudy/todolist-advance

GitHub - lizzieFEstudy/todolist-advance: 리액트 선발과제 투두리스트 웹사이트

 

 

2. Feelings (느낌, 주관)

해야할 일 다 끝나서 오늘은 널널하게 보냈다.

그래서 미뤄뒀던 리액트부분 CS를 작성해봤다. 어렴풋이 알고 있던 내용들이 명확하게 정리되는 느낌!

하지만 이걸 면접에서 물어본다면 내 어휘력으론 설명 불가

남은시간은 이번 주 공부했던 내용 중 몇몇개 추려서 정리해 볼 예정! 

 

3. Findings (배운 점)

(리액트 개인과제 리뷰)

깃헙에 올라가있는 리액트 프로젝트는 node_modules폴더가 안올라가있으므로
[터미널]npm i --force를 해서 버전에 상관없이 강제로 인스톨해줘야 함. 그럼 node_modules폴더가 생성됨

.jsx 쟉스 

id 사용할 때 uuid 또는 별도의 방법 사용 추천

✔️9분20초
// 완료버튼을 클릭했을 시 작동하는 이벤트 핸들러
setState는 이전 값을 가지고 있으므로 괄호안에 콜백함수로 화살표함수 넣어줌
이전에 있던걸 콜백함수로써 넣어서 쓸수도 있음
setTodo ((beforeTodo) => {
  return beforeTodo.map((item) => {
    if(item.id === id) {
      return { ...item, isDone: true}; //item을 꺼내면서 isDone을 새로 덮음
    }
    return item;
  });
});

==============================
<div>
<header></header>
<main></main>
<footer></footer>
</div>

불리언은 .toString()으로 문자열로 변환해줘야 JSX에서 뿌려줄 수 있음

완료여부 true,false 부분
배열api들은 체이닝 기법을 사용하면 훨씬 쉽다.

✔️내 코드도 변수이름 todos, contents로 바꾸기. 상태이름을 완료와 취소로 나누기
삭제버튼의 filteredTodo를 deletedTodos로 바꾸기. ✍️나중에다시👀filter의 return안에 item.id!==todo.id

✔️ 1. 리액트 uuid 구글링ㄱ
2. 터미널에서 yarn add react-uuid
3. import uuid from 'react-uuid'
4. js사용하는 부분에서 uuid()로 사용하면 됨

✔️ <button onClick={()=>{
    const newTodos = todos.map((item) => {
      if(item.id === todo.id) {
        return {
          ...item, isDone: !item.isDone,
        };
      } else {
        return item;
      }
    });

    setTodos(newTodos)
  }}>완료</button>

✔️컴포넌트 분리: 인풋1 할일목록+완료목록1
Input.jsx - props는 todos, setTodos만 가져왔음
1. rfsc로 컴포넌트 만듦
2. 옮기고 컴포넌트 사용
리스트 부분 제목포함해서 상위 div까지 가져옴
TodoList.jsx - props는 todos, setTodos, listIsDone만 가져왔음
<h2>{listIsDone ? '완료목록' : '할 일 목록'}할 일 목록</h2>
그리고 하단의 true false 부분을 listIsDone값으로 교체
App.js에서 <TodoList todos={todos} setTodos={setTodos} listIsDone = {false} />
<TodoList todos={todos} setTodos={setTodos} listIsDone = {true} />

 

4. 자기선언

알고리즘을 for문으로만 매번 똑같이 풀어서

다음번엔 for문 안쓰고 풀어보기로 했다!

못 풀면 for문 안 쓴 다른사람 풀이 공부한 뒤, 안보고 다시 처음부터 작성해보기✔️  

for문 중독 벗어나..