임시 변수의 사용을 줄이자. 로직을 처리하기 위해 임시로 변수를 생성해서 사용할수록 예상치 못한 동작과 사이드 이펙트가 많아질 수 있다.
임시 변수를 사용하지 않고 바로 로직 처리해서 리턴할 수 있는 값이면 그렇게 하자. 함수 내에 선언된 임시 변수를 통해 추가적인 수정을 하고 싶다는 유혹을 애초에 없애야한다.
함수의 스코프는 좁을수록 좋다. 함수마다 각자의 고유한 역할을 부여하고, 고유한 역할 외의 로직은 다른 함수로 떼서 처리하자.
전역 공간을 더럽히지 말자. 모듈, IIFE, 클로저 등을 사용해서 전역 공간을 사용하지 않는 방향으로 변수 선언을 해보자(IIFE, 모듈, 클로저에 대해 각각 좀 더 공부해봐야겠다).
바닐라 JS로 TODO App 만들어보기
상태는 App.js에서만 통합 관리하기.
하위 컴포넌트에서 이벤트 핸들링과 상태를 이용한 로직 처리 실행. App.js는 정말로 초기화, 업데이트 등 상태 관리만을 전담하도록 하자.
하위 컴포넌트에서 특정 상태가 변하게 된 상황이 생기면 그 맥락을 App.js에서도 알 수 있게 전달해줘야 한다.
하위 컴포넌트의 함수 인자로 App.js의 setState() 메서드 전달하고, 하위 컴포넌트에서 setState()의 인자로 변경된 상태를 전달하면 App.js에서 해당 변경 사항을 인지할 수 있고, 상태가 물려있는 다른 컴포넌트들에도 상태 변경에 대해 전파할 수 있음.
아직 모듈을 쪼개고, 상태를 통합 관리한다는 개념이 와닿지 않는데, 좀 더 연습해보면서 리액트 들어가기 전에 준비를 잘 해둬야겠다.