오늘은 과제를 하면서 깨달은 점과 느낀 점을 적어보려한다.
컴포넌트 방식으로 간단한 앱을 만들어보았다.
ui는 데이터에 따라 변화되어야 한다
- state는 ui를 그릴 때 사용하는 값이지, 진짜 데이터가 아니다.
- 그렇기에 ui를 변화시킬때는 저장소의 데이터를 먼저 바꾸고,
바꾼 데이터를 받아 상태를 바꿔준 후, 바꾼 상태로 화면에 렌더링해줘야 한다.
컴포넌트들은 연관성이 없어야 한다
- 같은 상태를 쓰는 컴포넌트들끼리 그룹을 지었으면
상태를 관리하는 최상위 부모 컴포넌트외의 자식 컴포넌트들은
서로 영향을 주면 안된다. - 자식 컴포넌트들끼리 상호작용해야한다면 부모의 상태를 거쳐야한다.
- 부모의 상태가 바뀌면 모든 자식들의 상태가 따라서 바뀌어야 한다.
전체적인 흐름
- 자식 컴포넌트에 이벤트 발생
- 스토리지에서 데이터를 가져와 이벤트 결과대로 가공
- 다시 스토리지에 업데이트
- 스토리지에서 업데이트 된 데이터를 가져와 가장 상위 컴포넌트의 상태를 바꿈
- 상위 컴포넌트의 상태가 바뀔 때 자식들의 상태도 바뀌고 렌더링 되도록 함
과제를 하면서 저장소의 데이터는 바꾸지 않고 상태만 바꿔서 렌더링해서 뭔가 계속 꼬였었다. 그렇게 삽질을 하다가 데이터를 먼저 바꾸고 상태를 업데이트해줘야 흐름에 맞다는 것을 깨달았다. 그것을 계기로 부모와 자식간의 데이터 흐름과 ui변경 과정을 어느 정도 숙지할 수 있게 되었다.
역시 스스로 고생을 하면서 배워야 강렬하게 남는 것 같다.
#프론트엔드