[TIL] React-redux To-do List v.2 221207

TodoList v.2

 

 

React 숙련 주차 개인 과제

react-router-dom, styled-components, redux를 사용해서 My Todo List 다시 만들기

- Requirement

• todos 데이터는 React-redux 를 사용해서 전역으로 상태를 관리
• todo modules - Ducks pattern
• Todo 추가하면 제목과 내용 input 다시 빈 값이 되도록 구현
• input에 값이 있는 경우에서 상세페이지로 이동하는 경우, input의 value가 초기화되도록 구현
• 상세보기 클릭하면 상세페이지, 이전으로 클릭하면 리스트 화면으로 되돌아가기

기능 및 요구사항 구현 완료

React 입문 주차 팀 과제

🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사 배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야 할까요?

• 차이점 : 배열의 내장 함수 사용 여부
• Array.from, 해당 유사 배열이 사용할 수 있는 반복문 등을 이용해 배열로 바꾼 후 배열의 내장함수를 통해 변경하거나 유사배열 요소 하나하나에 직접 접근해 바꾸어야 한다.

🔐 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는지 라이프 사이클 흐름을 그려볼까요?

 

🔐 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

• 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르면 단방향, 부모가 자식에게 데이터를 전달해주고, 자식이 그 데이터를 관리(수정 등)할 수 있으면 양방향 바인딩입니다.

🔐 event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야 할까요?

• useEffect 훅을 사용한다. useEffect 훅의 return에서 이벤트 리스너를 해제할 수 있다.

React.useEffect(() => {
	...
	return () => window.removeEventListener("어떤 이벤트", 어떤 함수);
}, []);

🔐 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. document.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

• document를 통한 접근은 해당 컴포넌트에 있는 어떤 DOM 요소뿐 아니라 화면 자체, 즉 개발자 도구로 볼 수 있는 전체 document에 접근하는 거예요. 
• 게다가 document.get~~~~가 실행되는 위치에서 해당 DOM요소가 화면에 그려져 있을 것이라는 확신을 갖기도 어려워요. (화면에 마운트 되기 전일 수 있고, 이 경우 분명 오류가 나겠죠!)
• 하여, useRef()등을 사용하여 특정 DOM 요소에 접근합니다.

🔐 SPA 방식과 MPA 방식은 무엇인가요?

• SPA는 Single Page Application, MPA는 Multi Page Application!
• 이름 그대로 SPA는 html을 하나만 갖고, MPA는 여러 개의 html을 갖고 있습니다.
• 특정 주소의 페이지를 보여달라고 요청이 왔을 때, SPA 방식은 한 html을 가지고 여러 페이지인 척 가진 자원을 쪼개 보여주고, MPA는 그때그때 주소에 맞는 html을 보여줍니다.

👊🏻 오늘 한 일

• React-redux 개인 프로젝트

😲 오늘 느낀 점

내일 시험이 걱정된다. 잘 끝내야 할 텐데... 리덕스를 더 공부해야겠다.

👏🏻 오늘의 칭찬

리덕스의 흐름과 그 코드를 이해하기 위해 노력했다.

🤔 오늘 아쉬운 점

css에 시간을 너무 쏟은 것 같다.

⛵️ 내일 할 일

• 10시 Redux 숙련 주차 시험 - 오류 해결 및 설명
• TodoList v.2 - CODE REVIEW ⭐️
• TodoList v.2 - Git push & Version update & README update
• TodoList v.2 - Vercel 배포 및 과제 제출
• React 숙련 주차 팀 과제 keyword 선정해서 정리하기
• React- redux 강의 들으며 개념 정리
• [프로그래머스] 35. 문자열 정렬하기 - Git push
• 하체 웨이트