6월 시작!!!!! 4주차의 끝물!
어느새 6월!!!!!
4주차가 이미 끝나가는 수요일이라니..?
사실 항해 시작한지는 솔직히 최소 두달은 된 느낌인데 이제 겨우 4주차인가..? 싶다가도 내가 벌써 4주째 공부를 하고 있다고 생각하니 생각보다 시간이 빠른 것 같기도 하고 모르겠다. 날씨가 너무 좋아서 힘들당..
집이지만 집에 가고싶다는 그 말이 무슨 뜻인지 너무너무 알 것 같다 ㅋㅋㅋㅋㅋ
어쨌든 그래도 막연하기만 했던 리액트와도 아주 천~~천히 친해지고 있는 것 같아서 다행이고..
며칠전에는 심심해서 채용정보를 찾아봤다.
프론트엔드 포지션의 지원자격 스킬을 살펴보니, 무려 4주 전만 해도 javascript, html, css, git같은 단어들 빼고는 전부 외계어같았는데 이제 다시보니 그 중 몇개는 내가 접한것들이어서 좀 많이 신기했다!!!!
그 중에는.. 이번주 모든 사람들을 혼란에 빠트린 redux가 거의 항상 껴있는 것 같아서 조금 많이 아쉬웠지만(?)... 그만큼 남은 주차들 더 열심히해서 내 기술로 만들어야겠다는 다짐을 했다. 이렇게 새로운 6월을 새로운 다짐으로 힘차게 시작!!!! 해봐야겠다 ㅎ_ㅎ
그래도 다행인건.. 친구들이 요즘 공부하는건 어떠냐고 물었을 때 내 대답이 힘들지만 재.미.는.있.어~ 라서.. 아직은 다행인 것 같다. 재밌게 해야지 재밌게...!!!!!(억텐..)
Q1. <Form>을 사용할 때 <button type="submit"> 을 함께 사용하면 리덕스 데이터가 초기화되는데, 왜 초기화 될까?
<form> 태그 내부에 존재하는 모든 <button> 태그는 클릭 시 기본적으로 <form>을 전송하는 submit 이벤트를 발생시킨다. type="submit" 이라는 속성을 별도로 지정하지 않아도 자동으로 submit 이벤트가 발생하는데, 그 이유는 <from>태그 자체가 기본적으로 작성된 폼을 서버로 전송하는 역할을 하기 때문이다.
이러헥 <form>에서 submit 이벤트가 발생할 경우 해당 페이지는 reload가 진행되기 때문에 새로고침되어 리덕스 데이터가 초기화 되는 것이다.
<form> 태그에 submit 이벤트가 발생하지 않도록 하려면?
-
<form>
폼의 submit 이벤트에 return false 값을 추가한다. -
<form>
비슷한 방식이지만, submit이벤트에 function을 추가하고 해당 함수에 preventDefault() 이벤트를 추가해 event 발생 시 기본 동작이 수행되지 않도록 막는다.function preventSubmit(e){ e.preventDefault(); }
Q2. 컴포넌트 A가 구독중인 리덕스 스토어에 저장된 데이터가 변경되었을 때, 컴포넌트A가 변경된 값을 가져오는 과정
우선 리덕스에서는 특정 컴포넌트가 Store를 구독할 경우, 구독하는 과정에서 특정 함수가 Store에 전달이 된다. 그리고 이 컴포넌트가 구독중인 State값이 Store에서 변동되면 Store는 이전에 전달받았던 함수를 호출하여 해당 컴포넌트에 변경사항을 알려준다.
리덕스의 처리 과정을 공부한 뒤, 피그마로 급하게 그려본 Redux의 데이터 흐름!
흐름을 순서대로 작성해보자면 아래와 같다.
- C 컴포넌트에서 변경하고자 하는 상태에 대한 Action을 Dispatch한다.
- Dispatch를 통해 Action을 전달받은 Reducer는 해당 Action을 통해 새로운 State를 생성한다
- 새로운 State가 저장됨에 따라 Store에서는 변경된 State를 감지하고 구독할 때 전달받은 함수를 호출하여 해당 내용을 구독중인 컴포넌트에 State가 변경되었음을 알려준다.
- State가 변경됨에 따라 A 컴포넌트는 리렌더링을 통해 새로운 Props값을 받아온다.
