[TIL] 진짜 알찼던 월요일, 오늘의 개발일지

 

오늘은 진짜 오후, 저녁 , 그리고 새벽까지 정말 열심히 공부했다

오후에는 팀분들과 함께, 리액트 입문 과제 코드리뷰를 했고 저녁에는 후발대 강의를 들었다

리액트 입문 과제를 진짜 5번은 반복한 것 같은데, 처음보다 확실히 이해가 잘되었다

 

후발대 강의 들으면서,

리액트 TodoList 코드를 어떻게 작성해야 하는지 하나하나 다 정리한 내용

1. 터미널에서 yarn create react-app 프로젝트명 으로 리액트 프로젝트를 만든다.

2. app.js를 app.jsx로 바꿔준다. -> 컴포넌트가 들어간 파일은 왠만하면 다 jsx로 바꾸기

3. app.js에서 컴포넌트 어떤거 만들지 구상

4. 컴포넌트 파일 만들고, 컴포넌트 생성(InputForm, TodoList), app.js에서 임포트하기

5. 각 컴포넌트에 Function 만들고(return도 넣어주고) export 도 아래 써주기

6. app.jsx에서 todos 만들기 (useState와 uuid 인스톨해주기)

const intialTodoList = [

    {

      title: "test",

      content: "test",

      isDone: false,

      id: uuidv4(),

    },

  ];

  const [todoList, setTodoList] = useState(intialTodoList);

 

7. 아래 리턴 컴포넌트들에 프롭스 넘겨주기 + 넘겨주면서 TodoList에 isActive 설정해주기

 

return (

    <div>

      <InputForm setTodoList={setTodoList}/>

      {/* 하나는 working , Done */}

      <TodoList isActive={true} todoList={todoList} />

      <TodoList isActive={false} todoList={todoList} />

    </div>

  );

 

 

8.( InputForm) 리턴문

  return (

    <form onSubmit={onSubmitHandler}>

      <input type="text" onChange={onChangeTitleHandler} value={title} />

      <input type="text" onChange={onChangeContentHandler} value={content} />

      <button>추가하기</button>

    </form>

  );

}

9. ( InputForm) 리턴문

 

function InputForm({ setTodoList }) {

  const [title, setTitle] = useState("");

  const [content, setContent] = useState("");

 

  const onChangeTitleHandler = (event) => {

    setTitle(event.target.value);

  };

 

  const onChangeContentHandler = (event) => {

    setContent(event.target.value);

  };

 

  const onSubmitHandler = (event) => {

    event.preventDefault();

    const newTodo = {

      title,

      content,

      isDone: false,

      id: uuidv4(),

    };

    setTodoList((prev) => {

      return [...prev, newTodo];

    });

    // 초기화해주기

    setTitle("");

    setContent("");

  };

 

10. (TodoList) 안의 내용

function TodoList({ isActive, todoList }) {

  return (

    <div>

      <h4>{isActive === true ? "working" : " Done "}</h4>

      {todoList

        .filter((item) => item.isDone === !isActive)

        .map((item) => {

          return (

            <div key={item.id} style={{ border: "1px solid black" }}>

              제목<div>{item.title}</div>

              내용<div>{item.content}</div>

            </div>

          );

        })}

    </div>

  );

}

 

export default TodoList;

 

 

 

 

🤔 내가 헤맸던 부분

 add기능을 구현하려고 하는데, 자꾸 실제로 add가 저장이 안되었다
=> 해결 : props로 받을땐  ( ) 안에 넣어주면 되었는데, 구조분해할당이 Js니까 특정한 넘긴 이름으로 불러오려면 { } 로 감싸서 넘겨줬어야됐따!!!! 홀리몰뤼!!!!!!!!!!

 

 

---

이렇게 리액트 입문 프로젝트는 반복, 또 반복을 했는데

문제는, 리액트 입문 과제 형식으로 프로젝트를 만드는 것이 아니라 리덕스로 만드는 것도 뭬우 중요하기 때문에!!

리액트 입문을 하다가 리덕스를 배우는데 갑자기 난이도가 확 올라간 느낌이 들었다

 

하지만, 이것 또한 낯선거지 어려운 게 아닐 수도 있기 때문에

리액트 입문때 한것보다 반복 또 반복 10번이고 20번이고 익숙해지게 연습해야징

내일은 무조건 리덕스 코드 내용을 한번은 숙지해야겠다