이번에 todolist를 완성하고 깃헙에 올리며 이슈란에 피드백을 부탁드렸더니 기술매니
저님께서 피드백을 해주셨다. 감사하게도 완전 자세하고 꼼꼼하게 피드백을 해주셔서 내 코드의 부족함을 깨닫게 해주신 듯!! 기술매니저님 완전 좋으신 분인듯✨✨
내 todolist에서 개선해야할 사항은 대략 이렇다.
📌Todolist에서 개선해야할 사항
- 랜더링 시 정적인 페이지인 Header컴포넌트는 분리해줄 것
- CreateTodo 컴포넌트와 관련된 useState와 onChange함수를 외부에서 정의해서 랜더링 할 필요없는 부분도 함께 랜더링되니 내부에서 정의해서 랜더링 할것
- todo도 조건부 렌더링되니 card부분도 분리를 할 것
컨포넌트 분리에 관해서 친절히 설명해주셔서 정말 좋았다. 기술매니저님께 들은 팁은 컴포턴트를 분리할 때 '상태'를 기준으로 어떻게 '랜더링'이 될 지 초점을 맞춰보라고 말씀해 주셨다. 그래서 앞으로 리액트를 실행할 때 고민을 해보아야 할듯!! 리액트 잘하시는 분께서 todolist를 5번쯤 만들어보면 리액트에 좀 더 익숙해진다던데 5번까지는 아니더라도 이번주 일요일에 WIL하기 전에 한번 리뉴얼한다는 기분으로 만들어봐야겠다. 오늘 상담을 하면서 usestate나 props, 그리고 import {}가 뭔지에 대해 매니저님과 얘기를 나누면서 대략적으로 공부할 수 있었다.
📌import {}랑 그냥 하는 것의 차이
처음엔 props하는 것과 비슷한 건가...하고 생각했는데 다르다는 것을 알게 되었다. export 방식의 차이라고 하는데 default가 붙으면 고정되있기때문에 괄호를 붙일 필요가 없지만 그렇지 않으면 {}(중괄호)를 사용하여 import해야한다고 한다.
📌useState란?
컴포넌트 내부에서 바뀔 수 있는 값을 state라고 하는데, 이 state를 만들때 사용하는 것이 useState다. 보통
const [value,setValue]=usestate(초기값)
형태로 사용하는데 value가 바꾸고 싶은 변수이고 그 변수에 값을 새롭게 넣을때 setValue를 사용해서 두 값의 차이를 DOM에서 확인해서 바뀐 값으로 렌더링하도록 만드는게 useState의 역할이라고 한다. 이때 중요한 것은 바꾼 값은 저장되는게 아닌 렌더링, 즉 그려지는 것이다! 그래서 새로 고침하면 다시 초기값으로 바뀌게 된다. 나는 바닐라자바스크립트로 todolist 만들기를 할 땐 localstorage를 써서 key와 value를 저장하는 것을 강의로 들었기에 당연히 어딘가에 값이 저장돼야 한다고 생각했는데 완전 신세계였다😲😲
✅ 여기서 추가로 기억하기: 리액트에서 데이터 불변성이 중요한 이유는?
리액트에서는 화면을 리렌더링 할지 결정할때 state의 변화를 확인하기 때문! 그래서 불변성이 지켜지지 않으면, 즉 메모리 주소가 변하지 않으면 state가 변했다고 리액트가 인식 못하기에 리렌더링이 일어나지 않는 것이라고 한다.
=> 그러니 usestate를 이용하여 배열을 변경시킬땐 직접 수정을 가하지 않고 전개연산자...를 사용해서 기존 값 복사 후, 값을 수정해야 함!
✍️ 오늘 하루 느낀점
오늘 레벨 2를 페어로 진행하게 될 분과 코드 리뷰를 진행하고 기술 매니저님과 면담하면서 생각한 건데, 역시 모르는 건 나누는게 이득이다...👍👍 물론 물어보기 전에 내가 알아보기 위해 노력해야 하는 건 맞지만, 그 과정에서 지나치게 헤맨다면 물어보는게 낫다는 걸 절절히 느낌... 왜냐면... props와 usestate를 이해 못해 강의를 2번씩 듣고 있었기 때문이다. 나는 내가 빡대가리라고 생각했지만 설명을 들으면 이해할 머리는 있었나보다. 사실 레벨 1 과제를 만들때는 일단 작동하게 만든다는 일념하에 코드를 짜집기 하듯 집어넣고 실행해보며 오류가 안 나올때까지 무한 반복했는데, 개발자로써 논리적인 구조를 생각하며 코드를 짜는게 중요하다고 다시 한번 느꼈다! 앞으로 더 열공해야 할 것 같다. 성장서사 가보자고~~💪
