[WIL] #5

🗓 기간: 23/6/26 ~ 23/7/9

👉🏼 이번주 목표

1. 리액트 숙련 주차 강의 듣기

👉🏼 공부한 내용 요약

• styled Components, hooks, Lifecycle, Dom, Virtual Dom, Redux 간략한 개념 익히기
• 비동기 프로그래밍 입문, REST, JSON 비동기 통신 실습
• 간단한 과제
  

👉🏼 어려운 내용

입문주차때 배운 내용을 가지고 간단한 투두리스트를 만들어 보았다.
제목과 내용을 넣으면 그 value값들이 리스트에 저장되고, 완료버튼을 누르면 완료영역으로 이동하고, 삭제버튼을 누르면 삭제가 되는 기능들이 추가로 있었다.
바뀌는 부분만 랜더링 할 수 있게 useState를 사용하여 총 3가지를 만들었다.

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [list, setList] = useState([
    {
      id: 1,
      title: "아침 조깅하기",
      content: "아침에 조깅을 하면 상쾌하다.",
      completed: false
    },
    {
      id: 2,
      title: "도시락 싸기",
      content: "날이 더워서 밖에서 못먹어요.",
      completed: false
    }
  ]);

title과 content와 기본적으로 들어있는 list들을 초기화 시켜놓았다.
input하면 value와 onChange, event.target.value은 세트로 기억했더니 추가는 간단하게 되었다.

완료와 삭제는 머릿속으로는 간단했는데 코드를 짜니 잘 안되어서 구글링의 힘을 조금 받았다^^

[추후 업데이트 칠 예쩡]

👉🏼 정리한 내용

• React-Hooks
• [React] 생명주기(LifeCycle)
• [React] 리덕스
• [React] 비동기 프로그래밍 입문 - Promise 객체

🐸  느낀 점

WIL은 일주일치 공부를 하고 정리하는 건데, 이번엔 2주에 걸쳐서 공부한 내용을 정리해보았다.
입문주차에는 JS ES6와 간단한 리액트 개념설명들이 있었다면 이번주엔 좀 더 어려운 내용들이 기다리고 있었다. 간단한 과제도 있었는데 반은 내가 하고 반은 구글링을 통해 코드를 완성시켰다. 코드를 보면 이해는 가는데 완벽하게 내것으로 만들기 위해 계속 봐야할 거 같다.

회사에서 비동기 통신을 이용해서 서버에서 데이터를 받아와 작업하는 일들이 종종 있는데, 정확하게는 잘 몰라도 실무 경험이 있어서 그런지 비동기 통신 쪽은 복습의 느낌으로 완강할 수 있었다.

숙련주차때 가장 기억에 남는건 아무래도 리덕스였다. 당장 이렇다!라고 설명은 못하지만 늘 나왔던 단어였는데 이번 기회에 dispatch라는 것과 store 등등 간단하게 이해가 되어 정리도 할 수 있었다.

리액트 쪽은 아무래도 실무 경험이 많지 않다보니 개념 정리 만으로는 완벽한 이해는 어렵겠지만 다음주부터 듣는 심화과정도 차근차근 들으면서 간단하게나마 이해하는 시간이 되었으면 좋겠다. 화이링 🙋🏼‍♀️